标签：item cli border app wrapper 空值 焦点 注意 ida
这里使用的FormModel 表单验证，它支持 v-model 检验(版本：1.5.0+)
<a-form-model :label-col="{ span: 3 }" :wrapper-col="{ span: 9 }" :rules="rules" :model="ruleForm" ref="ruleForm"> <a-form-model-item label="电话" prop="phone" required has-feedback> <a-input v-model="ruleForm.phone" placeholder="请输入电话"> </a-input> </a-form-model-item> </a-form-model>
下面只就表单验证需要的属性进行介绍：
data(){ // 手机格式验证 let validatorPhone=(rule,value,callback)=>{ // 如果为空值，就抛出错误 if(!value){ callback(new Error("请输入手机号!")); }else{ // 正则判断手机号格式的格式，正则判断失败抛出错误，否则直接callback() if(!/^1[2-9]\d{9}$/.test(value)){ callback(new Error("手机号格式不正确!")); }else{ callback(); } } }; return{ // 表单数据 ruleForm:{ phone:"" }, // 验证规则(对应a-form-model上的rules) rules:{ phone:[{validator:validatorPhone,trigger:"change"}]
// validator对应手机格式验证方法（注意必须要有callback）
// trigger对应触发验证的条件。取值有change(表单值改变时触发)；blur(表单元素失去焦点时触发) } } }
这里需要注意的一点是：rules、ruleForm、a-form-model-item的prop属性中的phone（属性名）要一样，否则validatorPhone中的参数value就无法获取到值（这个问题困扰了我半天）。
<a-form-model-item> <a-button type="primary" size="large" @click="submitForm(‘ruleForm‘)" >保存</a-button> </a-form-model-item>
其中：submitForm(‘ruleForm‘)方法是点击提交时执行的函数，参数‘ruleForm‘对应<a-form-model>中的ref="ruleForm"。
方法：
submitForm(formName) {this.$refs[formName].validate(valid => { if (valid) { alert(‘submit!‘); } else { console.log(‘error submit!!‘); return false; } }); }
当所有表单元素验证通过的时候执行上面的操作（alert(‘submit!‘);）。否则执行下面的操作
ant-design-vue之FormModel表单自定义验证
标签：item cli border app wrapper 空值 焦点 注意 ida
原文地址：https://www.cnblogs.com/codexlx/p/13111796.html
