vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）

vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）

文章目录

​​1、实现的效果​​​​2、编写的js文件（这里写在了api文件下）​​​​3、在vue页面中引入（script）​​​​4、页面代码​​

1、实现的效果

20220606_154646

2、编写的js文件（这里写在了api文件下）

//验证纯数字let regNumber = /^[0-9]*$/;//验证身份证let IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;//验证邮箱let regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//验证邮箱的正则表达式export default{ //验证用户昵称 checkNickName:(rule, value, callback)=> { value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入昵称')) } if (value.length < 0 || value.length > 10) { callback(new Error("昵称的长度范围是0-10，请输入合法的名称！！！")) } else if (regNumber.test(value)) { callback(new Error("输入的内容不能是纯数字！！！")) } else { callback() } }, //验证用户名 checkUserName: (rule, value, callback) => { value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入用户名')) } if (value.length < 0 || value.length > 10) { callback(new Error("昵称的长度范围是【0-10】")) } else if (regNumber.test(value)) { callback(new Error("输入的内容不能是纯数字！！！")) } else { callback() } }, //验证用户性别 checkGender :(rule,value,callback)=>{ value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入性别')) } if(value == '男' || value == '女'){ callback() }else{ callback(new Error("请输入合法的性别")) } }, //验证身份证 checkIdCard : (rule, value, callback) => { value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入身份证')) } // 校验身份证： if (IDRe18.test(value) || IDre15.test(value)) { callback() } else { callback(new Error("身份证不合法！！！")) } }, //验证邮箱 checkEmail : (rule, value, callback) => { value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入邮箱')) } if (value.length < 0 || value.length > 15) { callback(new Error("邮箱的长度输入有误！！！，合法长度为0-15")) } else if (!regEmail.test(value)) { callback(new Error("邮箱格式不合法！！！")) }else{ callback() } }, //验证手机号 checkPhone: (rule, value, callback) => { value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入箱手机号')) } if (!regPhone.test(value)) { callback(new Error("请输入正确的手机号！！！")) } else { callback() } }, //验证输入的密码 checkPwd: (rule, value, callback) => { value = value.replace(/\s*/g, "");//去除空格 if (!value) { return callback(new callback('请输入密码')) } if (value.length < 0 || value.length > 8) { callback(new Error("密码长度范围 0-8！！！")) } else if (regNumber.test(value)){ callback() }else{ return callback(new callback('输入的密码是整数')) } } }

3、在vue页面中引入（script）

4、页面代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。