Vue+Element form verification + digital English password and mobile phone number verification (detailed)

Form verification is required during project development. Regular expressions are used for password verification and mobile phone verification, so hereby record it.

1. Form diagram

 2. Code

<template>
 <!-- 结构 -->  //就是你要输入的名称
 <el-dialog
      title="//"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="//" prop="region">
          <el-select
            v-model="ruleForm.region"
            placeholder="请选择账号类"
            @change="selectiveType"
          >
            <el-option
              v-for="item in myOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="//" prop="tenant">
          <el-select
            v-model="ruleForm.tenant"
            placeholder="请选择商户"
            filterable
            v-if="AccountId == 3"
            @change="SelectMerchant"
          >
            <!-- 集团 -->
            <el-option
              v-for="item in group"
              :key="item.group_id"
              :label="item.group_name"
              :value="item.group_id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="ruleForm.tenant"
            placeholder="请选择商户"
            filterable
            v-else
            @change="SelectMerchant"
          >
            <!-- 站点 -->
            <el-option
              v-for="item in site"
              :key="item.stid"
              :label="item.stname"
              :value="item.stid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="//" prop="shID">
          <b>{
   
   { ruleForm.shID }}</b>
        </el-form-item>
        <el-form-item label="//" prop="atPresent">
          <span>{
   
   {ruleForm.atPresent}}</span>
        </el-form-item>
        <el-form-item label="//" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="//" prop="account">
          <el-input placeholder="请输入内容" v-model="ruleForm.account" @change='SelectAccount'>
            <template slot="prepend">{
   
   { ruleForm.default }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input
            v-model="ruleForm.phoneNumber"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input
            @change="importMiMa"
            v-model="ruleForm.password"
            placeholder="请输入密码"
          ></el-input>
          <div>密码需要10位数及以上,同时包含英文字母和数字</div>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            @change="affirmMiMa"
            v-model="ruleForm.confirmPassword"
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
        <div class="cj">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
</template>
<script>
export default {
  data () {
    return {
 ruleForm: {
        //form表单
        name: '',
        region: '',
        tenant: '',
        shID: '',
        account: '',
        phoneNumber: '',
        password: '',
        confirmPassword: '',
        atPresent:'',//当前选择的商户
        default: 'admin@'
      },
      rules: {
        //表单验证
        name: [
          { required: true, message: '请输入//', trigger: 'blur' }
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择//', trigger: 'change' }
        ],
        tenant: [{ required: true, message: '请选择//', trigger: 'change' }],
        account: [{ required: true, message: '请输入//', trigger: 'change' }],
        phoneNumber: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
           {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
              console.log(passwordreg.test(value))
              if (!passwordreg.test(value)) {
                callback(
                  new Error(
                    '请输入正确的手机号码哦!'
                  )
                )
              } else {
                callback()
              }
            }
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 10, message: '密码最少10位数哦', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
              console.log(passwordreg.test(value))
              if (!passwordreg.test(value)) {
                callback(
                  new Error(
                    '密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'
                  )
                )
              } else {
                callback()
              }
            }
          }
        ],
        confirmPassword: [
          { required: true, message: '请再次确认密码', trigger: 'change' }
        ]
      }
}
</script>

Effect