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="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>
