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

最新推荐文章于 2025-05-29 15:46:55 发布

转载最新推荐文章于 2025-05-29 15:46:55 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/XHappyness/p/7419660.html

文章标签：

#javascript #json #前端 #ViewUI

本文介绍如何在Vue项目中使用Element UI的el-form组件并添加自定义验证规则。通过示例展示了如何定义和使用正则表达式来校验输入字段，并提供了提交表单前的手动验证逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.com</template>
            </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 {
     //此处可以进行后台提交
    }
  }