element-ui验证用户注册相关项效验规则

原创于 2023-02-18 15:09:49 发布 · 507 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

elementui 专栏收录该内容

5 篇文章

订阅专栏

该段代码展示了在Vue.js中进行表单验证的实现，包括管理员姓名、账号、手机号码、邮箱、密码和确认密码的验证规则。密码必须包含至少两种类型的字符（大写字母、小写字母、数字、特殊符号），长度在8到30个字符之间，且两次输入需一致。手机号码需符合11位数字的格式，邮箱需符合标准的电子邮件格式。

包含以下规则：

1.内容都不能为空
2.密码长度应大于等于8个字符小于30个字符
3.密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!
4.两次输入密码一致
5.手机号和邮箱要用规范格式

代码：


      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="管理员姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入管理员姓名" />
        </el-form-item>
        <el-form-item label="管理员账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入管理员账号" />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" show-password/>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwords">
          <el-input v-model="form.passwords" placeholder="请输入确认密码" show-password/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  
  
      // 表单校验
      rules: {
        name: [
          { required: true, message: "管理员姓名不能为空", trigger: "blur" }
        ],
        account: [
          { required: true, message: "管理员账号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 8, max: 30, message: '密码长度应大于等于8个字符小于30个字符!', trigger: "blur" },
          {
            trigger: 'blur',
              validator: (rule, value, callback) => {
              var passwordreg = /^(?!([a-zA-Z]+|[a-z\d]+|[a-z~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+|[A-Z\d]+|[A-Z~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+|[\d~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+)$)[a-zA-Z\d~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+$/;
              if (!passwordreg.test(value)) {
                callback(new Error('密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'))
              } else {
                callback()
              }
            }
          }
        ],
        passwords: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          {
            trigger: 'blur',
              validator: (rule, value, callback) => {
                if (value !== this.form.password) {
                  callback(new Error('两次输入密码不一致'))
                } else {
                  callback()
                }
              }
          }
        ],
        // 验证正则手机号11位以1开头
        mobile:[
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var re = /^1\d{10}$/;
              if(re.test(value)){
                callback()
              }else {
                callback(new Error('抱歉手机号不合法!'))
              }
            }
          }
        ],
        email:[
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var re = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
              if(re.test(value)){
                callback()
              }else {
                callback(new Error('请输入正确的邮箱!'))
              }
            }
          }
        ]
      }