ElementUi表单rules验证

常用的表单验证

rules: {
name:[{
required: true,
message: ‘请输入用户名’,
trigger: ‘blur’
},{
min: 2,
max: 5,
message: ‘长度在 2 到 5 个字符’
},{
pattern: /¹+ $KaTeX parse error: Expected 'EOF', got '}' at position 36: \dots'用户名只能为中文' }̲ //{ pa\dots$ /, message: ‘以字母开头，长度在2-5之间，只能包含字符、数字和下划线’}
],
password: [{
required: true,
message: ‘请输入密码’,
trigger: ‘blur’
}, {
min: 6,
max: 30,
message: ‘长度在 6 到 30 个字符’
}, {
pattern: /^(\w){6,20} $KaTeX parse error: Expected 'EOF', got '}' at position 46: \dots字母、数字、下划线' }̲], mobile:[\dots$ /.test(value) == false){
callback(new Error(“请输入正确的手机号”));
}else{
callback();
}
}, trigger: ‘blur’}
],
// pattern: /^1[34578]\d{9} $KaTeX parse error: Expected 'EOF', got '}' at position 30: \dots前只支持中国大陆的手机号码' }̲ peopleID:[\dots$ )|(^\d{18} $KaTeX parse error: Undefined control sequence: \d at position 5: )|(^\̲d̲{17}(\d|X|x)$ )/, message: ‘你的身份证格式不正确’
}
],
carId:[
{required: true, message: ‘请输入车牌号’, trigger: ‘blur’},
{pattern:/(^{[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(}[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1} $^[A-Z]{2}[0-9]{5}$ )|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,
message: ‘常规格式：浙A00000’},
],
},

demo：

<el-dialog :visible.sync="addUserDialog" custom-class="user-dialog" title="新增用户">
  <el-form :rules="rules" ref="userForm" :model="userInfo">
    <el-form-item label="用户名" label-width="80px" prop="username">
      <!-- @input.native="changeCode" -->
      <el-input v-model="userInfo.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="80px" prop="password">
      <el-input v-model="userInfo.password"></el-input>
    </el-form-item>
    <el-form-item label="别名" label-width="80px" prop="nickName">
      <el-input v-model="userInfo.nickName"></el-input>
    </el-form-item>
    <el-form-item label="用户角色" label-width="80px" prop="authorityId">
      <!-- @change="changeAuthority(scope.row)" -->
      <el-cascader
        ref="authOptions"
        @change="handleChange"
        v-model="userInfo.authorityId"
        :options="authOptions"
        :show-all-levels="false"
        :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
        filterable
      ></el-cascader>
    </el-form-item>
  </el-form>
  <div class="dialog-footer" slot="footer">
    <el-button @click="closeAddUserDialog">取 消</el-button>
    <el-button @click="enterAddUserDialog" type="primary">确 定</el-button>
  </div>
</el-dialog>

  rules: {
    userName: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      {
        pattern: /^(\w){1,20}$/,
        message: "只能输入4-20个字母、数字、下划线",
      },
    ],
    username: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      {
        pattern: /^(\w){1,20}$/,
        message: "只能输入4-20个字母、数字、下划线",
      },
    ],
    password: [
      { required: true, message: "请输入用户密码", trigger: "blur" },
      {
        pattern: /^(\w){1,20}$/,
        message: "只能输入4-20个字母、数字、下划线",
      },
    ],
    nickName: [
      { required: true, message: "请输入用户昵称", trigger: "blur" },
      {
        pattern: /^(\w){1,20}$/,
        message: "只能输入4-20个字母、数字、下划线",
      },
    ],
    authorityId: [
      { required: true, message: "请选择用户角色", trigger: "blur" },
    ],
  },

\u4E00-\u9FA5 ↩︎

ElementUi表单rules验证

Guess you like