elementUI中的el-form怎么使用正则进行验证

http://element.eleme.io/#/zh-CN/component/form里给出了一个form验证的例子，但是都是使用el-form带有的验证规则，怎么使用自己定义的规则进行验证呢？：

.vue的html不变，只是在.ts中的验证中添加自己定义的规则，比如

.vue中

<el-form ref="newUser" :model="newUser" :rules="newUserRule" class="login-container">
      <el-row>
        <el-col :span="10">
          <el-form-item prop="userId">
            <el-input v-model="newUser.userId" placeholder="请输入sso用户名字">
              <template slot="append">@gridsum.comtemplate>
            el-input>
          el-form-item>
        el-col>
        <el-col :span="3" :offset="1">
          <el-select v-model="newUser.roleType">
            <el-option :value="0" :label="roleText[0]">el-option>
            <el-option :value="1" :label="roleText[1]">el-option>
          el-select>
        el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="addUser()">添 加el-button>
        el-col>
      el-row>
    el-form>

注意：

　　1. el-form-item的 prop="userId"跟el-input的v-model="newUser.userId"要对应

　　2. prop一定要写在el-form-item上

　　3.  :rules一定要写在el-form上

.ts中

newUserRule = {
    userId: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (/^[a-zA-Z]{4,20}$/.test(value) == false) {
            callback(new Error("用户名由4-20位字母组成"));
          } else {
            callback();
          }
        }, trigger: 'blur' //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证

 } ] };

提交表单时，先进性验证是否通过，再进行其他操作，具体实现，给出的链接里面有，但是使用ts的话如果没有声明文件，会提示validate等方法不存在，可以自己去声明，或者换种思路解决：

  addUser() {
    /*   this.$refs[formName]['validate']((valid) => {
       if (valid) {
         alert('submit!');
       } else {
         console.log('error submit!!');
         return false;
       }
     });  */
    if (this.newUser.userId == '') {
      this.$message.error('用户名不能为空!');
    } else if(/^[a-zA-Z]{4,20}$/.test(this.newUser.userId) == false) {
      this.$message.error('用户名不正确!');
    } else {
     //此处可以进行后台提交
    }
  }

 

转载于:https://www.cnblogs.com/XHappyness/p/7419660.html