iview form表单验证、validate
iview表单验证。
自定义规则校验
data () {
const validateChecker = (rule, value, callback) => {
if (!this.reportObj.checker) {
callback('检验员不能为空');
} else {
const len = value.replace(/[^\x00-\xff]/g, '011').length; // 替换三字节字符(utf-8)
if (len > 80) { // 限制80字节
callback(new Error('检验员超长,请缩短内容'));
}
}
callback();
}
return {
reportObj: {
checker: '',
},
reportRules: {
checker: [
{ required: true, message: '检验员不能为空', trigger: 'blur' },
{ validator: validateChecker, trigger: 'blur' }
],
},
}
}
iview表单验证。
第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意:Form标签里面是 :model 第四步:注意:在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步:在操作保存按钮时,添加方法,对整个表单进行校验,参数为检验完的回调,会返回一个 Boolean 表示成功与失败。 <Form :label-width="100" ref='dataForm' :model='dataForm' :rules="ruleValidate"> <FormItem label='编号:' prop="itemNo"> <Input placeholder="请输入编号" v-model='dataForm.itemNo'></Input> </FormItem> ruleValidate: { //data里面,写验证 itemNo:[ { required: true, message: '编号不能为空', trigger: 'blur' }, ], } addChange(name){ //methods里面,写方法 this.$refs[name].validate(valid => { if (valid) {} }); } </Form>
iview进行表单验证select时候验证失败的问题:
用iview自带的表单验证select标签的时候,一直验证不通过,因为iview默认校验数据类型为String,而我的select用的value是number类型的 ruleValidate: { customer:[ { required: true, message: '下拉选项不能为空', trigger: 'blur',type:'number'}, ], }
和下拉框一样,日期的类型是data ruleValidate: { advance:[ { required: true, message: '时间不能为空', trigger: 'change' ,type: 'date'}, ], }
iview进行多重验证的写法:
1.多重验证包括第一要验不能为空,第二要验证限制的一些长度,写正则表达式等 ruleValidate: { goodsNum: [ { required: true, message: '数量不能为空', trigger: 'blur' }, { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'}, ], }
2.多重验证包括第一要验不能为空,第二要验证限制的一些长度,写正则表达式等 <FormItem prop="telephone" label="座机号码" :rules="[ {required: true, message: '座机号码不能为空', trigger: 'blur'}, {pattern: /^((\d{3,4})|\d{3,4}-|s)?\d{7,8}$/, message: '座机号码格式不正确', trigger: 'blur'} ]" > <m-input type="text" v-model="dataForm.telephone"> </m-input> </FormItem>
end.
原文:https://blog.csdn.net/amanda_wmy/article/details/79026940