elementUI-表单-校验

配置校验

1、在`el-form` 标签上配置

<el-form ref="form" :model="form" label-width="120px" :rules="rules"><!-- 若干个的el-form-item标签  -->
</el-form>

其中

:model=“form” 必须配置表单数据对象 form 指的是该表单对应的data中的表单，而 el-form-item 绑定的数据大多都在这个form中

:rules=“rules” 必须配置表单验证规则

ref=“form” 必须配置后面是选中该表单进行全表单校验或者是单个数据的校验会用到

:inline=“true” 非必须行内表单模式值为true则表单中元素排列在一行；不配置则默认值为false

disabled 禁用表单，禁止编辑

2、在 `el-form-item` 标签上配置

<el-form-item label="设备名称" prop="name"><el-inputv-model="form.name"clearableplaceholder="请输入设备名称"></el-input>
</el-form-item>

其中

label=“设备名称” 是该输入框的名字

prop=“name” 必须配置指定该项字段

:rules=“xxxx” 非必须一般都在data中统一配置校验规则

3、在 data 中配置校验规则

data() {return {rules: {xxxx}}

4、在提交表单时进行校验

全表单校验-validate

    submitForm() {this.$refs["form"].validate((valid) => {  //   选中ref名为 form  的元素进行校验 if (valid) {                            //   如果校验通过才会对数据进行下一步处理，if (this.form.id !== undefined) {updateEquipment(this.form).then((response) => {this.msgSuccess("修改成功");this.open = false;this.getList();});} else {                             equipmentAdd(this.form).then((response) => {this.msgSuccess("新增成功");this.open = false;this.getList();});}}});},

对单个表单数据进行校验-validateField

this.$refs.formRef.validateField('name',err  => {  // 选中ref值为 formRef 的元素进行校验if(!err){                                      // 通过，则...........alert('姓名校验通过啦！')}
})

清除表单校验-clearValidate

仅清除表单校验，一般用于表单的取消编辑和关闭表单时使用，避免下次打开表单时校验规则残留在表单上

this.$nextTick(() => {                       //  最好包裹在 $nextTick 函数里清除校验，将回调延迟到下次 DOM 更新循环之后执行this.$refs.formRef.clearValidate();
});

重置表单值-resetFields

对整个表单进行重置，将所有字段值重置为初始值 并移除校验结果

所以，根据开发需要自行选择

注意：这里的重置为初始值。也就是在data中书写的初始值，当表单第一次在页面中渲染时所用的数据就是初始数据，而不是把值都变为空；注意概念

this.$refs[formName].resetFields();// 选中ref值为formName 的 表单 把表单数据重置为初始值并且清除其校验规则

案例-清除表单校验

需求：让表单弹窗在点击X号以及取消按钮时都清除本次的校验记录，且把表单数据重置为初始值

解决方案：让X号的回调以及取消按钮所触发的回调都触发同一个函数，在该函数里清空校验记录即可

1、弹窗配置：@close=“cancel”

<el-dialog:title="title":visible.sync="open":width="dialogWidth"@close="cancel"
></el-dialog>

2、表单中的取消按钮

<el-button @click="cancel">取 消</el-button>

3、cancel()

通常有时候还需要在该函数里做一些其他操作，因为resetFields有时候并不能保证可以清空form表单中的数据，那么就需要额外的对form表单数据进行清空

cancel() {this.open = false;                //  关闭弹窗this.$refs["form"].resetFields(); //  清空ref名为form的表单校验规则
},

当然，会存在不生效的问题

问题一：在还没有显示对话框之前就调用this.$refs[‘form’].resetFields()，会报错。

// 解决办法
this.$nextTick(() => {this.$refs['form'].resetFields();
});

问题二：如果添加和修改共用一个表单时就会出现重置无效的情况。

// 解决办法
this.$nextTick(() => {utils.copyFormObject(data, this.form);
});

校验规则-rules

其中

required 参数的值为true时，表单校验时框框前面才会出现红点

message 就是校验失败后报错的提示信息

trigger 校验触发时机 blur：表单元素失去焦点时触发； change：表单元素的值发生变化时触发；

type 值的类型 string: 字符串（默认值） number: 数字 boolean: 布尔值 method: 函数 regexp: 正则表达式 integer: 整数 float: 浮点数 array: 数组 object:对象 enum: 枚举类型，可以参考百度资料-枚举类型 date: 日期类型 url: URL类型，如 https://www.baidu.com/ hex: 文件格式类型，如 :020000040000FA email: 邮箱类型，如 3652452@qq.com any: 任意类型

pattern 正则校验规则写在这里嗷！！！

若只有一条校验规则，使用对象写法，直接就可以写在 el-form-item 头标签中；当然也可以统一在data中配置（建议）

:rules="{ required: true, message: '不能为空'}"    //  写在  el-form-item 头标签中的写法rules:[company_no:{ required: true, message: "公司名称不能为空", trigger: "blur" }]       //  在data中配置的写法,需要在校验规则前指明是哪个字段，前面所指的就是 company_no 字段的校验规则

若有多条校验规则，则使用对象数组；在一个数组中书写多个校验规则；下面是一个字段对应一个数组对象的校验

rules: [company_no: { required: true, message: "公司名称不能为空", trigger: "blur" },status: { required: true, message: "状态不能为空", trigger: "blur" },type: { required: true, message: "设备类型不能为空", trigger: "blur" },model : { required: true, message: "设备型号不能为空", trigger: "blur" }，mach_code : { required: true, message: "机器码不能为空", trigger: "blur" }],

若有多条校验规则且有的字段就不止一个校验规则，则使用对象数组；在一个数组中书写多个校验规则；下面是一个字段对应多个数组对象的校验

rules: {username: [{ required: true, message: "用户名不能为空", trigger: "blur" },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],status: { required: true, message: "状态不能为空", trigger: "blur" }
},

正则校验

nickname: [{message: "昵称不能为空",trigger: "blur",required: true,},{pattern: /^[\u4e00-\u9fa5]{2,5}$/g,message: "只能输入中文不要加其他字符且长度为2到5位",trigger: "blur",},
]

自定义校验规则

往往很多时候，常规的校验规则不能满足项目要求，那么此时就需要自定义校验规则加把劲

  data() {const validateUsername = (rule, value, callback) => {             //  自定义校验，自定义校验的话报错的提示信息就需要看返回的是什么了if (!validUsername(value)) {callback(new Error("请输入正确用户名"));} else {callback();}};const validatePassword = (rule, value, callback) => {             //  自定义校验if (value.length < 6) {callback(new Error("密码不能小于6位"));} else {callback();}};return {      //  data的返回值；在vue项目中，data必须是一个函数，是为了当组件每被复用一次时，都会返回一个新的一组data数据，各组件实例之间不影响，形成了良好的数据隔离，让各组件实例只维护自己的数据，自己变不影响其他loginRules: {username: [{ required: true, trigger: "blur", validator: validateUsername },    //  validateUsername  为自定义校验函数名，在自定义函数中书写自定义校验规则],password: [{ required: true, trigger: "blur", validator: validatePassword },],},};},