vant form表单校验方式及常用正则

  • Post author:
  • Post category:其他


方式一

: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}$/

(持续维护中)



版权声明:本文为shuishui_97原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。