html表单验证必填项,element-ui 表单必填项和表单验证方式解析，以及表单验证规则...

(一)表单必填项

需求：表单里必填项需要有红色星号标识，当未填写时显示中文提示语

思路：表单项里写required

问题：当表单项的验证规则绑定为blur事件时，表单项内元素清空后，会提示“xx is required”，其中xx是绑定的prop值。

解决办法：在表单项里模拟红色星号的样式，去掉required，写class=“is-required”,必填的限制在绑定的rules里写。

(二)表单验证方式解析

model：表单控件绑定的数据对象，在校验或重置时会访问该数据对象下对应的表单数据，类型为 Object。

rules：表单验证规则，即上面介绍的 async-validator 所使用的校验规则，类型为 Object。

ref必须加，还得和model一样

el-form-item 里面的prop是rules里面对应的名称的验证内容，而验证的就是v-model里面的值存不存在

在点击保存按钮时(@click="handleOk('form'))，进行验证

handleOk(formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

// 表单验证通过之后的操作

} else {

console.log('error submit!!');

return false;

}

});

},

(三)表单验证规则

rules: {

email: [{ required: true,validator: checkEmail, trigger: "blur" }],

user_name: [{ required: true, message: "请输入电话号码", trigger: "blur" }],

}

自定义验证规则：

data() {

let checkEmail = (rule, value, callback) => {

//邮箱正则

var reg = new RegExp(

"^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"

);

if (!value) {

callback(new Error("邮箱地址不能为空"));

} else if (!reg.test(value)) {

callback(new Error("请输入正确的邮箱地址"));

} else {

callback();

}

};

},