常用正则表达式：
1、手机号码：
^(13[0-9]|14[5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|16[5|6]|17[1-8|18[0-9]|19[1|9])\d{8}$
2、电子邮箱：
/^\w+@[a-z0-9]+\.[a-z]{2,4}$/
3、身份证：
/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
4、港澳身份证：
/^([A-Z]\d{6,10}(\w1)?)$/
5、网址URL：
^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$
6、帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
7、电话号码：
^((d{3,4})|d{3,4}-)?d{7,8}$
8、邮政编码：
[1-9]d{5}(?!d)
9、腾讯QQ号：
[1-9][0-9]{4,}
开发实例
开发一个小功能过程中，需要录入邮箱、手机号和身份证号，这是用户输入的，为了限定用户不能随心所欲的输入，避免存入数据库的数据为脏数据，就需要加入验证规则。
功能：弹窗，表单保存身份证号、邮箱、手机号。
<!--表单组件--><el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px"><el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"><el-form-item label="序号"><el-input v-model="form.id" style="width: 370px;" /></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="form.name" style="width: 370px;" /></el-form-item><el-form-item label="身份证号" prop="idcard"><el-input v-model="form.idcard" style="width: 370px;" /></el-form-item><el-form-item label="民族" prop="nationality"><el-input v-model="form.nationality" style="width: 370px;" /></el-form-item><el-form-item label="学号" prop="studentid"><el-input v-model="form.studentid" style="width: 370px;" /></el-form-item><el-form-item label="年级班号" prop="classnumber"><el-input v-model="form.classnumber" style="width: 370px;" /></el-form-item><el-form-item label="研究方向" prop="researchdirection"><el-input v-model="form.researchdirection" style="width: 370px;" /></el-form-item><el-form-item label="学历" prop="educationbackground"><el-input v-model="form.educationbackground" style="width: 370px;" /></el-form-item><el-form-item label="政治面貌" prop="politicsstatus"><el-input v-model="form.politicsstatus" style="width: 370px;" /></el-form-item><el-form-item label="专业" prop="major"><el-input v-model="form.major" style="width: 370px;" /></el-form-item><el-form-item label="QQ" prop="qq"><el-input v-model="form.qq" style="width: 370px;" /></el-form-item><el-form-item label="手机" prop="phonenumber"><el-input v-model="form.phonenumber" style="width: 370px;" /></el-form-item><el-form-item label="微信号" prop="wechat"><el-input v-model="form.wechat" style="width: 370px;" /></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" tyle="width: 370px;" /></el-form-item><el-form-item label="宿舍楼地址" prop="dormaddress"><el-input v-model="form.dormaddress" style="width: 370px;" /></el-form-item><el-form-item label="籍贯" prop="nativeplace"><el-input v-model="form.nativeplace" style="width: 370px;" /></el-form-item><el-form-item label="家庭住址" prop="familyaddress"><el-input v-model="form.familyaddress" style="width: 370px;" /></el-form-item><el-form-item label="邮编" prop="postcode"><el-input v-model="form.postcode" style="width: 370px;" /></el-form-item><el-form-item label="家庭联系电话（注明紧急联系人）" prop="familyphone"><el-input v-model="form.familyphone" style="width: 370px;" /></el-form-item><el-form-item label="其他备注" prop="remarks"><el-input v-model="form.remarks" style="width: 370px;" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="text" @click="crud.cancelCU">取消</el-button><el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button></div></el-dialog>
我们在data中先定义validator
data() {const checkIdCard = (rule, value, cb) => {const regIdCard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/if (regIdCard.test(value)) {return cb()}cb(new Error('请输入正确的身份证号'))}const checkEmail = (rule, value, cb) => {const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/if (regEmail.test(value)) {return cb()}cb(new Error('请输入正确的邮箱'))}const checkMobile = (rule, value, cb) => {const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if (regMobile.test(value)) {return cb()}cb(new Error('请输入正确的手机号'))}}
rules是校验规则相关的内容
required: true表示必填，message: ' '则为提示信息,trigger: 'blur'触发校验
return {permission: {add: ['admin', 'personInformation:add'],edit: ['admin', 'personInformation:edit'],del: ['admin', 'personInformation:del']},rules: {idcard: [{required: true,message: '请输入身份证号',trigger: 'blur'},{// 通过validator 进行自定义校验规则validator: checkIdCard,trigger: 'blur'}],email: [{required: true,message: '请输入邮箱',trigger: 'blur'},{// 通过validator 进行自定义校验规则validator: checkEmail,trigger: 'blur'}],phonenumber: [{required: true,message: '请输入手机',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}],familyphone: [{required: true,message: '请输入手机',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}]}}},methods: {// 钩子：在获取表格数据之前执行，false 则代表不获取数据[CRUD.HOOK.beforeRefresh]() {return true}}
