vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）
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）
<script>
import rules from '@/api/rules.js';
export default {
data() {
//验证第二次输入的密码
const checkPwdSure = (rule,value,callback)=>{
const regN = /^[0-9]*$/;
if(value.length <0 || value.length >8){
callback(new Error("密码长度范围 0-8！！！"))
}else if(!regN.test(value)){
callback(new Error("输入密码不合法，只能是纯数字！！！"))
}else if(value !== this.UserForm.password){
callback(new Error("两次输入的密码不一致，请重新输入！！！"))
}else{
callback()
}
}
return {
UserForm: {
nickName:'',
userName: '',
gender:'',
IdCard:'',//身份证
email:'',
phone:'',
password: '',
surepassword:''
},
rules: {
nickName:[
{required:true,message:'请输入昵称',trigger:'blur'},
{validator: rules.checkNickName,trigger:['change','blur']}
],
userName: [
{required: true, message: '请输入姓名', trigger: 'blur'},
{validator: rules.checkUserName,trigger:['blur','change']}
],
gender: [
{required: true, message: '请输入性别', trigger: 'blur'},
{validator: rules.checkGender,trigger:['blur','change']}
],
IdCard: [
{required: true, message: '请输入身份证号', trigger: 'blur'},
{validator: rules.checkIdCard,trigger:'blur'}
],
email: [
{required: true, message: '请输入邮箱', trigger: 'blur'},
{validator:rules.checkEmail,trigger:'blur'}
],
phone:[
{required: true, message: '请输入电话号码', trigger: 'blur'},
{validator: rules.checkPhone, trigger: "blur"}
// {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{validator:rules.checkPwd,trigger:'blur'}
],
surepassword:[
{required:true,message:'请再次输入密码',trigger:'blur'},
{validator:checkPwdSure,trigger:'blur'}
]
}
};
},
methods: {
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
4、页面代码
<template>
<div class="w">
<header>
<div class="logo">
<a href="index.html"> <img src="data:images/logo.png" alt=""></a>
</div>
</header>
<div class="registerarea">
<h3>注册新用户
<div class="login">我有账号，去<router-link to="/">登陆</router-link></div>
</h3>
<div class="reg_form">
<el-form style="width: 60%" :model="UserForm" :rules="rules" ref="UserForm" label-width="100px">
<ul>
<li>
<el-form-item label="昵称" prop="nickName" >
<el-input v-model="UserForm.nickName" placeholder="请输入账号" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="姓名" prop="userName">
<el-input v-model="UserForm.userName" placeholder="请输入姓名" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="性别" prop="gender">
<el-input v-model="UserForm.gender" placeholder="请输入性别" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="身份证" prop="IdCard">
<el-input v-model="UserForm.IdCard" placeholder="请输入身份证" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="邮箱" prop="email">
<el-input v-model="UserForm.email" placeholder="请输入邮箱" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="手机号" prop="phone">
<el-input v-model="UserForm.phone" placeholder="请输入电话号码" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="UserForm.password" placeholder="请输入密码" ></el-input>
</el-form-item>
</li>
<li>
<el-form-item label="确认密码" prop="surepassword">
<el-input type="password" v-model="UserForm.surepassword" placeholder="请再次输入密码" ></el-input>
</el-form-item>
<li class="agree"><input type="checkbox" name="" id="">
同意协议并注册 <a href="#">《知晓用户协议》</a>
</li>
<li>
<el-form-item>
<el-button round type="primary" @click="submitForm('UserForm')">注册</el-button>
<el-button round type="primary" @click="resetForm('UserForm')">重置</el-button>
</el-form-item>
</li>
</ul>
</el-form>
</div>
</div>
<footer>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 友情链接 | English Site | Contact U
</div>
</div>
</footer>
</div>
</template>
vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）的更多相关文章
- form表单的action提交写到js中来，同时onclick事件也写在js中来。其action也可以通过ajax来提交的。
1,html脚本 <body> <div style="display: none;"> <form id="submitForm" ...
- H5利用pattern属性和oninvalid属性验证表单
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...
- 让input表单输入框不记录输入过信息的方法
有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...
- vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- Cleave.js – 自动格式化表单输入框的文本内容
Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...
- 【VUE】3.表单操作
1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
随机推荐
- 使用 Redis 源码编译发布 Windows 版 Redis For Windows 发行包
Redis 是个高性能的键值数据库,现在日常项目开发过程中,目前个人开发项目基本都会用到 Redis,主要是用来做 缓存 和 分布式锁 的底层支持,个人喜欢用 .NET 技术体系,所以一般部署也是用 ...
- 「Python实用秘技10」深度比较Python对象间差异
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第10 ...
- 自定义spring boot starter 初尝试
自定义简单spring boot starter 步骤 从几篇博客中了解了如何自定义starter,大概分为以下几个步骤: 1 引入相关依赖: 2 生成属性配置类: 3 生成核心服务类: 4 生成自动 ...
- java数组---特点，边界
数组的四个基本特点 1.其长度是确定的.数组一旦被创建,它的大小就是不可以改变的. 2.其元素必须是相同类型,不允许出现混合类型. 3.数组中的元素可以是任何数据类型,包括基本类型和引用类型. 4.数 ...
- 【java】学习路线12-内部类的使用事项
//内部类只能在其外部类当中使用//局部内部类:定义在方法里面//如果内部类和外部类有重名,就近原则在内部类中优先访问内部类.//如果想访问宿主类的同名成员,使用OuterClass.this.xxx ...
- Zookeeper 分布式事务锁的使用
使用Netflix的包 curator-recipes pom文件引入相关依赖 <dependency> <groupId>org.apache.zookeeper</g ...
- 【android 逆向】破解crackme0502
1.首先将crackme0502 拖入模拟器.打开应用,随意输出字符串 2. 将APK 拖入AndroidKiller 反编译 3.先查看androidmanifest.xml <?xml ve ...
- java8 新特性 -Optional的常见用法
1. Optional 一. 简介 Opitonal是java8引入的一个新类,目的是为了解决空指针异常问题.本质上,这是一个包含有可选值的包装类,这意味着 Optional 类既可以含有对象也可以为 ...
- Deepin20 LNMP环境搭建（又一个瞎折腾的经历）
背景 最近头脑发热,想安装个Linux系统来办工,所以安装了Deepin20的系统,折腾了一天的LNMP的环境,记录一下瞎折腾的过程. lnmp 是一个常见的web开发的环境 nginx 如果安装过可 ...
- haodoop企业优化
MapReduce 跑的慢的原因 MapReduce程序效率的瓶颈在于两点 计算机性能 CPU,内存,磁盘健康,网络 I/O操作优化 数据倾斜 Map和Reduce数设置不合理 Map运行时间太长,导 ...