vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)

new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/if (!value) {return callback(new Error('请输入电子邮箱'))}if (mailReg.test(value)) {callback()} else {callback(new Error('请输入正确的邮箱格式'))}}// 验证手机号let checkPhone = (rule, value, callback) => {const phoneReg = /^1[34578]\d{9}$/if (!value) {return callback(new Error('请输入手机号码'))}if (phoneReg.test(value)) {callback()} else {callback(new Error('请输入正确的手机号码'))}}// 验证确认密码let checkRePass = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));}else if (value !== this.register.password) {callback(new Error('两次输入密码不一致'));} else {callback();}};// 验证中文姓名let checkRealName = (rule, value, callback) => {//验证名字的正则表达式const realnameReg = /^[\u4E00-\u9FA5]{2,6}$/if (!value) {return callback(new Error('请输入真实姓名'))}setTimeout(() => {if (!realnameReg.test(value)) {return callback(new Error('请输入2-6个汉字'))} else {callback()}}, 100)};// 验证中文姓名let checkIdNumber = (rule, value, callback) => {const idNumberReg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/if (!value) {return callback(new Error('请输入身份证号码'))}setTimeout(() => {if (!idNumberReg.test(value)) {return callback(new Error('请输入正确格式的身份证号码'))} else {callback()}}, 100)}return {loading: false,register:{username:'',mobile:'',mobilecode:'',email:'',password:'',repassword:'',realname:'',radios:'',idcard:'',},registerRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },],mobile: [{ required: true, trigger: 'blur', validator: checkPhone  }],mobilecode: [{ required: true, message: '请输入手机验证', trigger: 'blur' }],email: [{ required: true, trigger: 'blur', validator: checkEmail }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },],repassword:[{ required: true, trigger: 'blur', validator: checkRePass }],realname: [{ required: true, trigger: 'blur', validator: checkRealName  }],idcard: [{ required: true, trigger: 'blur' , validator: checkIdNumber }],verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }]},verifySrc:'',verify_status:true,success_url:'',site_title:'',}},mounted(){this.captch()},methods:{captch(){axios("{:url('/verify')}").then(res => {if(res.data.status == 200){this.verifySrc = res.data.data.imgthis.register.key = res.data.data.keythis.success_url = res.data.success_urlthis.site_title = res.data.site_title}else{this.$message.error('验证码获取失败!')}})},refeshVerifySrc() {this.captch()},handleRegister(){this.$refs['register'].validate(valid => {if(valid){this.loading = trueaxios.post("{:url('/register')}",this.register).then(res => {if(res.data.status == 200){this.$message.success(res.data.msg)window.location.href = '/';}else{this.loading = falsethis.refeshVerifySrc()this.$message.error(res.data.msg)}})}})}},
})

vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)相关推荐

vue表单验证填写判断身份证自动写入年龄性别和出生年月日
判断身份证我用的是表单验证在你验证的下方写入就跟我这样差不多这是一个正则表达式 const rules = reactive<FormRules>({name: [{ required ...
jQuery表单验证用户名密码
//校验用户名function checkUsername() {var username = $("#username").val();alert(username);var u ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...
vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...

vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)

vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)相关推荐

最新文章

热门文章