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

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)}})}})}},})