vue表单验证自定义验证规则

vue表单验证自定义验证规则这是公司里Vue+ElementUI的项目。写的验证规则放图:样式代码:<divclass=”info”v-if=”openslist”><h2class=”info-h”>人大代表建议办理情况反馈表</h2><el-formref=”stateForm”:model=”stateForm”cla…

这是公司里Vue+Element UI的项目。写的验证规则放图:

vue项目
样式代码:

<div class="info" v-if="openslist">
        <h2 class="info-h">情况反馈表</h2>
        <el-form ref="stateForm" :model="stateForm"  class="stateforms" :rules="rules">
             <el-row type="flex" class="row-bg">
              		<el-col :span="12">
			              	<el-form-item label="听取意见方式" class="stateform" prop="way">
			                  	<el-select v-model="stateForm.way"  placeholder="请选择" @change="getReturn()">
				                    <el-option label="面复" value="1"></el-option>
				                    <el-option label="电话" value="2"></el-option>
				                    <el-option label="座谈" value="3"></el-option>
				                    <el-option label="未联系" value="4"></el-option>
			                  	</el-select>
			                </el-form-item>
	               		</el-col>
	                	<el-col :span="12">
			                <el-form-item label="办理人员态度" class="stateform" prop="attitude">
			                  <el-select v-model="stateForm.attitude"  placeholder="请选择" @change="getReturn()">
			                    <el-option label="好" value="1"></el-option>
			                    <el-option label="较好" value="2"></el-option>
			                    <el-option label="一般" value="3"></el-option>
			                    <el-option label="较差" value="4"></el-option>
			                  </el-select>
			                </el-form-item>
                	</el-col>
	          </el-row>
	        <el-form-item>
                 <el-button type="primary" @click="onSubmit('stateForm')" style="margin: 20px 0 0 80px;position: initial;">提交</el-button>
            </el-form-item>
     </el-form>
</div>

js代码:

data(){
      return{
			rules:{
			          way:[
			            { required: true, message: '请输入听取意见方式', trigger: 'change' }
			          ],
			          attitude:[
			            { required: true, message: '请输入人员态度', trigger: 'change' }
			          ]
       	 		}
     	 }
    }

记住form表单一定要“:rules=“rules(自己定义)””,下面是自定义规则,放图:
在这里插入图片描述
样式代码:

	  <el-form  label-width="100px" class="passstyle" :model="Formname"  :rules="editFormPwd"  ref="Formname">
			<el-form-item label="用户名:">
				<!--<el-input  style="width:50%" clearable></el-input>-->
				<span style="width:50%" class="passSpan" >{
  
  {username}}</span>
			</el-form-item>
			<el-form-item label="原密码:"   prop="oldpwd" >
				<el-input  style="width:50%" clearable v-model="Formname.oldpwd" type="password">
				</el-input>
			</el-form-item>
			<el-form-item label="新密码:" prop="newpwd">
				<el-input  style="width:50%" clearable v-model="Formname.newpwd" type="password"></el-input>
			</el-form-item>
			<el-form-item label="确认密码:" prop="newpwds">
				<el-input  style="width:50%" clearable v-model="Formname.newpwds" type="password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary"  @click="subpass('Formname')">提交</el-button>
			</el-form-item>
		</el-form>

js代码:

		data(){
				//这里是自定义的规则
				var newpwdmin=(rule, value, callback)=>{
					if(!value){
						return callback(new Error('请输入密码'));
					}else if(value !==this.Formname.newpwd){
						return callback(new Error('两次输入密码不一致!'));
					}else {
        				callback()
      				}
				}
			return{
			editFormPwd:{
					oldpwd:[{	required: true, message: '请输入原密码', trigger: 'blur'}],
					newpwd:[{ required: true, message: '请输入密码', trigger: 'blur' },],
					newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],
						}
				}
			}

提交返回什么就不写了;

今天的文章vue表单验证自定义验证规则分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/11350.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注