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来进行判断,后台只进行数据库的查询以及传值 ...
随机推荐
- benchmark性能测试
目录 benchmark介绍 benchmark运行 benchmark运行参数 benchmark性能测试案例 benchmark介绍 基准测试主要是通过测试CPU和内存的效率问题,来评估被测试代码 ...
- java-方法创建与使用
1.方法: 1)封装一段特定的业务逻辑功能 2)方法尽可能的独立,一个方法只干一件事(低耦合) 3)方法可以被反复调用多次(高复用) 4)减少代码重复,有利于代码维护,有利于团队协作开发2.方法的定义 ...
- Python逆向爬虫之pyquery，非常详细
系列目录 Python逆向爬虫之pyquery pyquery是一个类似jquery的python库,它实现能够在xml文档中进行jQuery查询,pyquery使用lxml解析器进行快速在xml和h ...
- Druid学习之查询语法
写在前面 最近一段时间都在做druid实时数据查询的工作,本文简单将官网上的英文文档加上自己的理解翻译成中文,同时将自己遇到的问题及解决方法list下,防止遗忘. 本文的demo示例均来源于官网. D ...
- 基于 Apache Hudi 和DBT 构建开放的Lakehouse
本博客的重点展示如何利用增量数据处理和执行字段级更新来构建一个开放式 Lakehouse. 我们很高兴地宣布,用户现在可以使用 Apache Hudi + dbt 来构建开放Lakehouse. 在深 ...
- R数据分析：用R建立预测模型
预测模型在各个领域都越来越火,今天的分享和之前的临床预测模型背景上有些不同,但方法思路上都是一样的,多了解各个领域的方法应用,视野才不会被局限. 今天试图再用一个实例给到大家一个统一的预测模型的做法框 ...
- 第九十九篇:JS闭包
好家伙,总是要来的,去面对那些晦涩难懂的原理,它就在那里,等着我去搞定它 首先我要去补充一些最基本的概念, 1.什么是内存? 新华字典永远的神, 但这个解释显然不够 去看看百度百科: 内存: CP ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- format添加未知个参数方法
一个python巧妙技巧,分享给大家 我的需求是将一个dict的键都format输出,用到了*对字典解包 data = {a: 1, b: 2...} msg = f"{'{} '*len( ...
- 巧用KingbaseES中的动态DDL
概述 :在DBA的日常工作中,经常遇到一些需要基于数据库当前状态的实用程序查询的实例.比如一个逻辑复制的目标表,主键ID列与生成数据的序列不同步,这将导致插入新行是,会有主键冲突.要纠正这个问题,需要 ...