前端日常-VUE-表单form篇

1、表单验证手机号

phone: [
          {
            required: true,
            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],

2、表单验证限制特殊字符及空格

username: [
          { required: true, trigger: 'blur', validator: validUserName },
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' }
        ],
const validUserName = (rule, value, callback) => {
  let reg =new RegExp("[`~!%@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）|{}【】‘；：”“'\"。，、？]");
  if(reg.test(value)){
     return callback("不能输入该特殊字符")
  }else{
     return callback();
  }
}

3、表单验证限制邮箱

email: [
          { required: false, trigger: 'blur', validator: validEmail }
        ],
const validEmail = (rule, value, callback) => {
      if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }

4、表单验证限制邮编

postcode: [
             { type: 'number', required: false, trigger: 'blur', validator: validPostCode }
          ],
const validPostCode = (rule, value, callback) => {
      if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error('邮编格式不正确'))
      } else {
        callback()
      }
    }

5、表单验证密码3种方式验证及重复密码

passxinword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { required: true, validator: validatePass , trigger: "blur" }
        ],
        passroleword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: checkPhone2, trigger: 'blur', required: true }
        ],
var validatePass = (rule, value, callback) => {
   //必须包含⼤⼩写字母、数字、特殊字符长度再9-16位之间
    var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,16}");
      if (value === "") {
          callback(new Error("请输⼊密码"));
      } else if (value.length < 9 || value.length > 16) {
        callback(new Error("请输⼊9~16位密码"));
      } else if (!regex.test(value)) {
        callback(new Error("密码必须同时包含字母、数字和特殊字符其中三项"));
      } else {
        callback();
      }
    }
    let checkPhone2 = (rule, value, callback) => {
      if(value !== this.loginForm.passxinword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }

//密码须包含大/小写字母、数字、符号中的两种
var regex = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S+$/
//必须包含⼤或⼩写字母、数字、特殊字符长度再9-16位之间
var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,16}")
//必须包含⼤写和⼩写字母、数字、特殊字符长度再8-30位之间
var regex = new RegExp("^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}$")
// 密码须包含大/小写字母、数字、特殊字符，且包含两种的不同特殊字符
const checkPhone = (rule, value, callback) => {
var li = '1\\1'
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=(?:.*[!@#$%^&*()_+~={}\-[\]|:;"'<>,.?/`])).{5,}$/
        const specialChars = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '~', '=', '{', '}', '-', '[', li.slice(1,2), ']', '|', ':', ';', '"', "'", '<', '>', ',', '.', '?', '/', '`']
        // 这里可以根据需要添加或修改特殊字符
        let count = 0
        for (let char of specialChars) {
          if (value.includes(char)) {
            count++
          }
        }
        if (!regex.test(value) || count < 2) {
          callback(new Error('密码须包含大/小写字母、数字、两种的不同特殊字符'))
        } else {
          callback()
        }
      }

6、表单验证社会信用代码

socialCreditCode: [
             { required: true, message: '统一社会信用代码不能为空', trigger: 'change' },
             { validator: validateCreditCode, trigger: 'blur' }
        ],
let validateCreditCode = (rule, value, callback) => {
      if (!value) {
          return callback(new Error('统一社会信用代码不能为空'))
      }
      setTimeout(() => {
          if (CheckSocialCreditCode(value.trim()) === true) {
            callback()
          } 
          else {
            callback(new Error('请输入正确的统一社会信用代码'))
          }
      }, 100)
    }
export function CheckSocialCreditCode (Code) {
  let patrn = /^[0-9A-Z]+$/ // 18位校验及大写校验
  if (Code.length !== 18 || patrn.test(Code) === false) {
    return false
  } else {
    let Ancode // 统一社会信用代码的每一个值
    let Ancodevalue // 统一社会信用代码每一个值的权重
    let total = 0
    let weightedfactors = [1,3,9,27,19,26,16,17,20,29,25,13,8,24,10,30,28] // 加权因子
    let str = '0123456789ABCDEFGHJKLMNPQRTUWXY' // 不用I、O、S、V、Z
    for (let i = 0; i < Code.length - 1; i++) {
      Ancode = Code.substring(i, i + 1)
      Ancodevalue = str.indexOf(Ancode)
      total = total + Ancodevalue * weightedfactors[i] // 权重与加权因子相乘之和
    }
    let logiccheckcode = 31 - (total % 31)
    if (logiccheckcode === 31) {
      logiccheckcode = 0
    }
    let Str =
      '0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y'
    // eslint-disable-next-line camelcase
    let Array_Str = Str.split(',')
    logiccheckcode = Array_Str[logiccheckcode]
    let checkcode = Code.substring(17, 18)
    if (logiccheckcode !== checkcode) {
      return false
    }
    return true
  }
}

7、表单验证身份证号码

adminIdCardNo: [
          { required: true, message: '身份号码不能为空', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入合法的身份号码', trigger: 'blur' }
        ],

98、动态设置表单限制

<el-form-item :label="'条目' + (index + 1) +':'" v-for="item,index in itemModel.dynamicContent1_1.items" :key="index" :prop="'dynamicContent1_1.' + 'items.' +index+ '.itemName'" :rules="[{ required: true, message: `请输入条目${item.sort + 1}`, trigger: 'blur' }]" style="padding: 0 0 0 20px">
  <el-input v-model="item.itemName" :disabled="disabledsed" placeholder=""></el-input>
      <el-button v-if="index == 0" :disabled="disabledsed" style="margin-left:20px" class="filter-item" type="primary" @click="creat(1)">添加</el-button>
      <el-button v-else :disabled="disabledsed" style="margin-left:20px" class="filter-item" type="danger" @click="delet1(index,1)">移除</el-button>
</el-form-item>

99、表单验证遇到v-if导致验证失败（添加key）

<el-form-item v-if="ruleForm.region1 == true && ruleForm.region2 == true" label="场馆名称"prop="yydStadiumId" key="yydStadiumId">
  <el-select v-model="ruleForm.yydStadiumId" placeholder="请选择场馆名称" style="width: 380px;" clearable>
    <el-option v-for="item in orsderStatusesyydtent" :key="item.id" :label="item.stadiumName" :value="item.id">
    </el-option>
  </el-select>
</el-form-item>
rules: {
  yydStadiumId: [{ required: true, message: '请选择场馆名称', trigger: 'change' }],
}

0、v-model.trim表单强制前后不让输入空格