一. 给表单绑定校验规则
<el-form :rules="loginRules" />
二、表单校验规则
| 规则 | 说明 |
|---|---|
| required | 如果为true，表示该字段为必填 |
| message | 当不满足设置的规则时的提示信息 |
| pattern | 正则表达式，通过正则验证值 |
| min | 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值 |
| max | 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值 |
| trigger | 校验的触发方式，change（值改变） / blur （失去焦点）两种 |
| validator | 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验 |
示例:
loginRules: {
mobile: [{
required: true, message: '手机号不能为空', trigger: 'blur'
},
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
}
三. 自定义规则校验
loginRules: {
mobile: [{ validator: checkMobile, message: '手机号第三位必须是0', trigger: 'blur' }]
}
第一个参数代表当前的校验规则。
第二个参数代表当前被校验的数据。
第三个参数是一个回调函数。** 注意：无论是否通过校验，都要调用callback()函数 **。
data () {
// 自定义校验规则
const checkMobile = function (rule, value, callback) {
value.charAt(2) === '0' ? callback() : callback(new Error('错误'))
}
return {}
}
四. 主动校验
element-ui提供了表单校验的API，我们需要通过 this.$refs 拿到表单的 DOM对象，来调用API函数。
① 给<el-form> 标签设置 ref 属性。。
② 给提交按钮绑定点击事件。
③ 在事件函数中，给表单对象绑定 validate()函数，进行校验。
methods: {
// 手动校验
submitForm () {
this.$refs.loginFormRef.validate()
.then(() => console.log('校验成功'))
.catch((error) => console.log('校验失败'))
}
}
element-ui 提供的表单校验API
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) |
| validateField | 对部分表单字段进行校验的方法 | Function(props: array , string, callback: Function(errorMessage: string)) |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array , string) |
1）validate可以传入一个函数作为参数，判断是否校验成功；也可以使用promise的.then().catch()方法。
（2）上面使用的是promise方法。下面是传入回调函数的方法。
this.$refs.loginFormRef.validate(（boolean，object）=>{} )
形参boolean的值可以判断校验是否成功；形参object时未通过校验的字段。
作者：大刀劈向鬼子
链接：https://www.jianshu.com/p/1981a062f5e4
