form表单验证、校准

一.onkeyup 

限制只可输入数字

<el-input

  style="width: 70%"

  οninput="if(value>2147483647)value='2147483647'"

  οnkeyup="value=value.replace(/[^\d]/g,'')"

  placeholder="请输入场所日常容纳人员数量"

  :readonly="readonly"

/>

二.pattern

aaWxpUnitPostcode: [{ pattern: /^[1-9]\d{5}(?!\d)$/g, required: false, message: '请输入正确的邮政编码', trigger: 'blur' }],

三.validator方法

confirmPassword: [
  { required: true, trigger: "blur", message: "请再次输入您的密码" },
  { required: true, validator: equalToPassword, trigger: "blur" }
],

const equalToPassword = (rule, value, callback) => {
  if (this.registerForm.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

四.js校准

js可以校准手机号，身份证号、邮箱、网址等等，这里只做一个例子

放在 utils 下面的validate.js中
// 验证网址

export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

使用

import { validURL } from '@/utils/validate'

if (validURL(URL)) {
  console.log(“是正确的网址”)
}

注意，若需验证数组，将prop改为需验证的数组，添加type：‘code’

<el-form-item prop="userIdList" label="选择所属库管员" style="display: block">
  <el-select v-model="form.userIdList" multiple >
    <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
  </el-select>
</el-form-item> 

userIdList: [{ type：‘array’ ,required: false, message: '请填写库管员', trigger: 'blur' }],

一些特殊符号正则表达式 

不能输入空格：^[^\s]*$

不能输入纯空格：^[^\s]+[\s]*.*$

可以输入字母（含大小写)：^[A-Za-z]*$

包含大写字母和 [ 、\ 、] 、^ 、- 、：^[A-Z]*$

可以输入数字：^[0-9]*$

可以输入汉字：^[\u4e00-\u9fa5]*$