封装Form表单正则校验--确认密码正则表达式

封装Form表单正则校验–确认密码正则表达式

为什么要封装：
一、因为我们在做项目的时候肯定不会只有一个页面用到这些Form表单的验证！
二、可以很方便的在多个页面中进行使用！
三、对以后系统升级维护更加方便快捷！

步骤一：
首先我们先创建一个js文件，我们暂时取名为regMatch.js
然后我们在这个js文件开始封装我们需要的Form表单的正则表达式
以下我们列举了一些常用到的正则表达式

/*** 手机号码正则匹配* @param {*} rule * @param {*} value * @param {*} callback */
export function phoneRule(rule, value, callback) {if (!rule.required && !value) {return callback();}if (!value) {callback(new Error('请输入手机号码'))} else {const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/if (reg.test(value)) {callback()} else {return callback(new Error('请输入正确的手机号码'))}}
}/*** 身份证号码正则匹配* @param {*} rule * @param {*} value * @param {*} callback */
export function IDCardRule(rule, value, callback) {// console.log("value", value)if (!value) {callback(new Error('请输入身份证号码'));} else {var city = {11: "北京",12: "天津",13: "河北",14: "山西",15: "内蒙古",21: "辽宁",22: "吉林",23: "黑龙江 ",31: "上海",32: "江苏",33: "浙江",34: "安徽",35: "福建",36: "江西",37: "山东",41: "河南",42: "湖北 ",43: "湖南",44: "广东",45: "广西",46: "海南",50: "重庆",51: "四川",52: "贵州",53: "云南",54: "西藏 ",61: "陕西",62: "甘肃",63: "青海",64: "宁夏",65: "新疆",71: "台湾",81: "香港",82: "澳门",91: "国外 "};var tip = ""var pass = true;if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {tip = "身份证号码格式错误"pass = false;} else if (!city[value.substr(0, 2)]) {// tip = "地址编码错误"tip = "身份证号码输入错误"pass = false} else {// 18位身份证需要验证最后一位校验位if (value.length === 18) {value = value.split('')// ∑(ai×Wi)(mod 11)// 加权因子var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]// 校验位var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]var sum = 0var ai = 0var wi = 0for (var i = 0; i < 17; i++) {ai = value[i]wi = factor[i]sum += ai * wi}var last = parity[sum % 11];if (parity[sum % 11] != value[17]) {// tip = "校验位错误"tip = "身份证号码输入错误"pass = false}}}if (!pass) {callback(new Error(tip))} else {callback()}}
}/*** 邮政编码正则匹配* @param {*} rule * @param {*} value * @param {*} callback */
export function postCodeRule(rule, value, callback) {if (!rule.required && !value) {return callback();}if (!value) {callback(new Error('请输入邮政编码'));} else {const reg = /^[1-9]\d{5}$/;// console.log(reg.test(value));if (reg.test(value) || value == '000000') {callback();} else {return callback(new Error('请输入正确的邮政编码'));}}
}/*** 统一社会信用代码正则匹配* @param {*} rule * @param {*} value * @param {*} callback */
export function uniformCodeRule(rule, value, callback) {if (!value) {callback(new Error('请输入统一社会信用代码'));} else {const reg = /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/;if (reg.test(value)) {callback();} else {return callback(new Error('请输入正确的统一社会信用代码'));}}
}/*** 电子信箱正则匹配* @param {*} rule * @param {*} value * @param {*} callback */
export function emailRule(rule, value, callback) {if (!rule.required && !value) {return callback();}if (!value) {return callback(new Error('请输入电子邮箱'))} else {const reg = /^[a-zA-Z0-9._%+-]+@(?!.*\.\..*)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/if (reg.test(value)) {callback()} else {return callback(new Error('请输入正确的电子邮箱'))}}
}/*** 验证手机号和座机号的正则表达式* @param {*} rule * @param {*} value * @param {*} callback */
export function IDCarduniformCodeRule(rule, value, callback) {if (!rule.required && !value) {return callback();}if (!value) {callback(new Error('请输入证件号码'));} else {const reg =  /^((0\d{2,3}-\d{7,8})|1[3|4|5|6|7|8|9][0-9]\d{8})$/;const reg1 =  /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/;if (reg.test(value)||reg1.test(value)) {callback();} else {return callback(new Error('请输入正确的证件号码'));}}
}

现在我们列举了一些常用的正则表达式，那么我们接下来就在页面中进行使用了

步骤二：在使用页面中我们第一步就要引入这个文件：

import { IDCarduniformCodeRule, emailRule, uniformCodeRule,postCodeRule,IDCardRule,phoneRule} from "@/utils/regMatch";

步骤三、然后我们在你:rules="formRules"中的firmRules里面进行使用了

linkmanPhone: [{required: true,validator: phoneRule,trigger: "blur",},],

接下来实现确认密码的正则表达式了

//银行卡正则
bankCode: [{validator:bankCode,required: true,trigger: ['change', 'blur']
}],
//确认银行卡卡号
fixbankCode: [{required: true,message:"请确认银行卡卡号",trigger: ['change', 'blur']},{validator: (rule, value, callback) => {return value === this.form.bankCode;},message: '两次输入的银行卡卡号不同',trigger: ['change','blur'],
}],

进行到这就是一个完整的例子了，希望对你有所帮助！！！
如果帮助到你，请给我点个赞！

封装Form表单正则校验--确认密码正则表达式相关推荐

form表单数字校验（二）——邮箱校验-当前页面
form表单数字校验(二)--邮箱校验-当前页面效果代码 index.vue <el-form-item v-if='!isDisabled' label='邮箱'><el-in ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
antd form 表单数据校验·记
目录一.antd form 表单校验语法二.antd form 表单校验规则三.antd form 表单校验实例 1.一般的表单校验 2.连续的表单校验 3.连续的复杂表单校验 (1).Form ...
jQuery——封装form表单的数据为json对象
CDN <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrit ...
AntDesign Form表单字段校验的三种方式
1.使用getFieldDecorator的rules规则最简单的方法就是使用getFieldDecorator中的rules验证.rules中定义校验规则,message为校验不通过时的提示文字. ...
使用vue表单验证库async-validator封装Form表单组件
src/components/data/seller/create/contract.vue <template><create-portlet title="合同信息&q ...
jQuery表单正则校验(邮箱、手机号、身份证)
→邮箱校验需输入@.符号例如:@Gmail.com →手机号校验需开头以1开头的11位纯数字 →身份证校验需18位纯数字 ★效果图如下 → NO : 提交按钮 → OFF :清空输入框 ...
JavaWeb解决form表单刷新提示确认重新提交表单
在servlet中进行跳转页面使用getRequestDispatcher,会造成页面的重新加载和表单的重新提交. 我们只需要将跳转方式改为 response.sendRedirect(&qu ...
js表单验证确认密码输入一致
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >用户名 ...

封装Form表单正则校验--确认密码正则表达式

封装Form表单正则校验–确认密码正则表达式

封装Form表单正则校验--确认密码正则表达式相关推荐

最新文章

热门文章