VUE Element-ui 表单自定义验证规则

淡淡的烟草味﹌ 2021-07-25 11:27 643阅读 0赞

验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误

HTML代码：

  1. <el-form 
  2.     :model="modifyForm" 
  3.     :rules='modifyFormRules'
  4.     label-suffix="："
  5.     ref="modifyForm" 
  6.     label-width="100px"
  7.     class="demo-ruleForm" 
  8. >
  9.     <el-form-item label="身份证号" prop="cardId">
  10.         <el-input class="inp" v-model="modifyForm.cardId"></el-input>
  11.     </el-form-item>
  12.     <el-form-item label="手机号" prop="phoneNumber">
  13.         <el-input class="inp" v-model.number="modifyForm.phoneNumber"></el-input>
  14.     </el-form-item>
  15. </el-form>

验证：

  1. modifyFormRules:{   /*信息修改表单验证 */
  2.  cardId:[
  3.    {required:true, message:'请输入身证号', trigger:'blur'},
  4.    {
  5.      pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
  6.      message: '身份证号码格式有误',
  7.      trigger:'blur'
  8.    },
  9.  ],
  10.  phoneNumber:[
  11.    {required:true, message:'请输入手机号', trigger:'blur'},
  12.    {pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,message: '手机号格式不对',trigger:'blur'},
  13.  ],
  14. }

注：

  1.       1、使用 **pattern **验证属性 定义正则表达式， 进行验证
  3.       2、使用 **v-model.number** 限制输入内容为数字

发表评论

表情：
评论列表 （有 0 条评论，643人围观）

还没有评论，来说两句吧...

相关阅读