如上,在data中定义表单验证规则的对象数组rules(可以单独编写验证器函数),并直接绑定到表单标签的rules参数中。 其中,validator是单个表单域格式验证的验证器,一般是需要比较复杂的格式验证的时候才会用。如果是非空验证、数据类型验证或者正则表达式能处理的,都可以直接通过rules的type/Pattern等相关参数直接配置就好了。
1.对整个表单进行规则验证: <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item...
number: '', }, rules: { number: [ { validator: validateNumber, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('error submit!!'); return false; } }); }...
总结一下,ELForm是一款功能强大的表单组件库,它提供了一系列常用的规则类型,如[required]、[string]、[number]、[boolean]、[email]、[date]、[array]、[object]、[regexp]和[url]等。开发者可以根据具体需求选择合适的规则类型,并结合自定义规则来实现灵活、全面的表单验证功能。ELForm的出现使表单验证变得更加...
第二步:编写rules // rules值 productGroupRules: { key3_key1: [ {required: true, message: '请填写key3_key1值', trigger: 'change'} ], key3_key2: [ { type: 'number', required: true, message: '请正确的填写key3_key2值', trigger: 'change' } ] } // 将rules作为属性加到对应的...
表单动态验证失效,只需要加上key就可以了,实际上出现这个问题是因为vue的[diff算法],在diff算法中会尽可能的复用组件,所以需要加上key属性 <el-form-itemlabel="售价(元)":label-width="formLabelWidth"prop="cost"key="cost"><el-input-numberv-model="dataForm.cost":step="1":min="0":precision="2"...
<el-form ref="ruleForm" :rules="rules" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm"> <el-form-item class="payment_item" label="产品名称:" prop="paymentProductName"> <el-input v-model="ruleForm.paymentProductName" size="mini" style="width:350px" placehol...
在实际应用中,可以通过设置rules属性来定义字段的验证规则。针对数字输入的验证,可以使用内置的type属性,将其设置为"number",从而实现对输入是否为数字的验证。 3. 实现原理解析 在el-form中,通过设置type为"number",其实是利用HTML5中input元素的type属性来限制输入的内容必须为数字。在用户输入时,浏览器会自动对...
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="...
1. :model的数据属性和:rules的属性相对应 2. 一个el-form-item中有多个输入框,每个输入框都需要单独嵌套在el-form-item中,此操作可以单独校验每个输入框 3. 日期类型的数据,校验要指定type:'date' 4. 选择框的value为数值,校验需要指定type:'number' ...