Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性

1. 给页面表单对象添加验证属性

由于我的项目使用的el-form,则给el-form添加属性  :rules="registerRules" ref="registerForm"  

为el-form-item每个表单子项添加  prop 属性, 例如 

<el-form-item prop="username">
  <el-input name="username" type="text" v-model="registerForm.username" placeholder="请设置登录用户名"></el-input>
</el-form-item>

2. rules是一个验证规则对象,因此需要在data()页面数据里添加registerRules对象:

      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        password_repeat: [{ required: true, trigger: 'blur', validator: this.validatePassRepeat }],
        bind_phone: [{ required: true, trigger: 'blur', validator: vali