elementUI中from表单的基本使用和校验
表单的基本结构
(绑定model属性/rules规则) (设置prop属性) (v-model绑定属性) 表单的基本校验规则
| 规则 | 说明 |
| required | 如果为true,表示该字段为必填 |
| message | 当不满足设置规则时的提示信息 |
| pattern | 正则表达式,通过正则验证值 |
| min | 字符串的最小长度,数字的最小值 |
| max | 字符串的最大长度,数字的最大值 |
| trigger | 校验的触发方式,change(值改变时) blur(失去焦点时) |
| validator | 自定义函数完成校验 |
校验规则的格式
{key(字段名):value(校验规则)=>[{}] }
例:rule:{mobile:[{required:true, message:"手机号为必填项", trigger:"blur"},{pattern:/^1[3-9]\d{9}$/,message:"手机号格式不正确! ", trigger:"blur"} ]}
自定义校验规则
validator是函数,有三个参数(rule当前规则,value当前值,callback回调函数)
自定义校验规则:
var func=function(rule,value,callback){
//根据value进行校验//如果满足
//直接执行callback
callback()
//如果不满足
callback(new Error("错误信息"))
例: 手机号的第三位必须为7
const newMobile=function(rule,value,callback){
value.charAt(2)==='7'?callback():callback(new Error('第三位手机号必须是7'))
}
rule:{mobile:[{required:true, message:"手机号为必填项", trigger:"blur"},
{pattern:/^1[3-9]\d{9}$/,message:"手机号格式不正确! ", trigger:"blur" validator:newMobile}
]}
手动校验
| 方法名 | 说明 | 参考 |
| validate | 校验整个表单 参数是一个回调函数,回调函数在校验结束后被调用,并传入两个参数(校验是否成功和未通过校验的字段),如果不传回调函数,则会返回一个promise |
function(callback: function(boolean,object)) |
| validateField | 对部分表单字段进行校验 | |
| resetFields | 对整个表单进行重置,将所有字段重置为初始值并移除校验结果 | |
| clearValidate | 移除表单项的校验结果(传入需要移除表单项的prop属性[可以是数组的形式],不传的话会移除所有的校验) |
手动校验的使用
在el-form上添加ref="*
在方法中调用
this.$refs.*.validate(isOk=>{
if(isOk){
//校验通过
}
})
或者this.$refs.*.validate().then(()=>{
//校验成功}).catch(()=>{
//校验失败})
简单的总结应用
提交 export default { data() { const mobileRule = function (rules, value, callback) { value.charAt(2) === "7" ? callback() : callback(new Error("手机号第三位必须为7")); }; const passwordRule = function (rules, value, callback) { if (value.length >= 6 && value.length { // if (isOk) { //console.log("校验通过"); // } // }); // }, //方法二 不传参数 submit() { this.$refs.submitFrom .validate() .then(() => { console.log("校验成功"); }) .catch(() => { console.log("校验失败"); }); }, },};.Index { .box-card { margin: 100px auto; width: 500px; height: 500px; } background-color: pink;}
