element-ui表单验证

基本验证

---

<el-form 
         :model="ruleForm" 
         :rules="rules" 
         ref="ruleForm" 
         label-width="100px" 
         class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input> 
    </el-form-item>
     <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile"></el-input> 
    </el-form-item>
    <el-form-item label="确认手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile"></el-input> 
    </el-form-item>
</el-form>

rules: {
    name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
}
		
          
            
            

正则验证

---

mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
],

自定义验证

---

let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }


password:[
    { validator: validatePass, trigger: 'blur' },
]

 

 表单局部提交后端验证 

---

// 注意validatePass是属于data的，但不在return中。
data () {
let validatePass = (rule, value, callback) => {
    if (value.length >= 8) {
        let params = {
            'account': value
        }
        axios.post('localhost:8080/verifyUserAccount', params).then(function (response) {
            if (response.data.err) {
                callback(response.data.msg)
            } else {
                callback()
            }
        }).catch(function () {
            callback(new Error('服务异常'))
        })
    } else {
        callback()
    }
}
return{
    
}

//这是验证规则，同时也可以同时使用基本的验证规则
account: [
    { validator: validatePass , trigger: 'blur' }
]

总结

---

以上基本上已经覆盖了所有表单验证的情况，可以实现非常复杂的验证；

另外，还有提交的时候对表单内容进行的验证

事件名称	说明	回调参数
validate	任一表单项被校验后触发	被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array | string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array | string)