方式一
:rules=”[{ required: true, message: ‘请填写用户名’ }]”
方式二
:rules=”[{ pattern, message: ‘请输入正确内容’ }]”
const pattern = /\d{6}/;
方式三
:rules=”[{ validator, message: ‘请输入正确内容’ }]”
const validator = (val) => /1\d{10}/.test(val); //校验函数返回 true 表示校验通过,false 表示不通过
方式四
:rules=”[{ validator: asyncValidator, message: ‘请输入正确内容’ }]”
const validatorMessage = (val) => `${val} 不合法,请重新输入`;
方式五
:rules=”[{ validator: asyncValidator, message: ‘请输入正确内容’ }]”
const asyncValidator = (val) => new Promise((resolve) => { Toast.loading(‘验证中…’); setTimeout(() => { Toast.clear(); resolve(val === ‘1234’); }, 1000); });
// 校验函数可以返回 Promise,实现异步校验
正则:
身份证:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
手机号:/^1[34578]\d{9}$/
整数:/^\d+$/ 或 /^[0-9]*$/
保留2位小数:/^[0-9]+(\.[0-9]{1,2}|)$/
电子邮箱:
/^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ 或 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
URL地址:/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
电话号码:/^0\d{2,3}-?\d{7,8}$/
(持续维护中)