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

本文实例为大家分享了vue表单验证自定义验证规则，供大家参考，具体内容如下

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

样式代码：

<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-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'}],
               }
     }
}

提交返回什么就不写了；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。