一、常用表单校验规则
1、 邮箱校验规则一
export const validateEmail = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$ / )
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的邮箱' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
2、 网址校验规则
export const validateEmail1 = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^(https?|ftp):\/\/[^\s]+$ / )
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的网址' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
3、QQ校验规则
export const validateQQ = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^[1-9][0-9]{4,10}$ / ) ;
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的QQ号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
4、身份证号码校验规则
export const validateIdCard = async ( RuleObject, value ) => {
const reg = new RegExp ( / (^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$) / ) ;
const reg1 = new RegExp ( / ^[A-Z]\d{7,11}$ / )
if ( value) {
if ( ! reg1. test ( value) && ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的身份证号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
5、微信校验规则
export const validateCharts = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^[a-zA-Z][-_a-zA-Z0-9]{5,19}$ / ) ;
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的微信号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
6、手机号校验规则
export const validatPhone = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^1[3-9]\d{9}$ / ) ;
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的手机号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
7、电话号码校验规则
export const validatPhone = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^\d{3}-\d{8}|\d{4}-\d{7}$ / ) ;
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的手机号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
8、银行卡号校验规则
export const validatBankCard = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^[1-9]\d{9,29}$ / ) ;
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的银行卡号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
9、数字字母校验规则
export const validatNumberLetter = async ( RuleObject, value ) => {
const reg = new RegExp ( / ^([A-Z]|[a-z]|[\d])*$ / ) ;
if ( value) {
if ( ! reg. test ( value) ) {
return Promise. reject ( '请输入正确的工号' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
10、整数校验规则
export const validateInitNumber = async ( RuleObject, value, min, max ) => {
if ( value !== '' && value !== null && value !== undefined ) {
if ( ! Number ( value) && value !== 0 ) {
return Promise. reject ( '请输入数字' ) ;
} else if ( ! Number. isInteger ( Number ( value) ) ) {
return Promise. reject ( '请输入整数' ) ;
} else {
if ( max) {
value = Number ( value) ;
if ( value > max || value < min) {
return Promise. reject ( '请输入' + min + '到' + max + '之间的数值' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
} else {
return Promise. resolve ( ) ;
}
}
11、数字校验规则
export const validateNumber = async ( RuleObject, value, min, max ) => {
if ( value !== '' && value !== null && value !== undefined ) {
if ( ! Number ( value) && value !== 0 ) {
return Promise. reject ( '请输入数字' ) ;
} else {
if ( max) {
if ( value > max || value < min) {
return Promise. reject ( '请输入' + min + '到' + max + '之间的数值' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
} else {
return Promise. resolve ( ) ;
}
}
12、文本校验规则
export const validateInitTxt = async ( RuleObject, value, min, max ) => {
if ( value) {
if ( max) {
if ( value. length > max || value. length < min) {
return Promise. reject ( '请输入' + min + '到' + max + '个字符' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
13、密码校验规则
export const validatePWD = async ( RuleObject, value, min, max ) => {
if ( value) {
if ( max) {
if ( value. length > max || value. length < min) {
return Promise. reject ( '请输入' + min + '到' + max + '个字符' ) ;
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
} else {
return Promise. resolve ( ) ;
}
}
最后附上rules中的使用方法
import { validateEmail, validateInitTxt, validateQQ, validateIdCard, validatPhone, validateEmail1, validatBankCard, validateInitNumber, validateNumber, validateCharts, validatNumberLetter } from './validateForm.js' ;
export default {
'姓名' : [
{
required : true , message : '请输入名字'
} ,
{
validator : async ( RuleObject, value ) => validateInitTxt ( RuleObject, value, 1 , 30 ) , trigger : 'change'
}
] ,
'年龄' : [
{
required : true , message : '请输入年龄'
} ,
{
validator : async ( RuleObject, value ) => validateInitNumber ( RuleObject, value, 16 , 65 ) , trigger : 'change'
}
] ,
'身高' : [
{
required : true , message : '请输入身高'
} ,
{
validator : async ( RuleObject, value ) => validateInitNumber ( RuleObject, value, 140 , 210 ) , trigger : 'change'
}
] ,
'体重' : [
{
required : true , message : '请输入体重'
} ,
{
validator : async ( RuleObject, value ) => validateNumber ( RuleObject, value, 35 , 200 ) , trigger : 'change'
}
] ,
'邮件' : [
{
required : true , message : '请输入邮件'
} ,
{
validator : validateEmail, trigger : 'change'
}
] ,
'邮箱' : [
{
required : true , message : '请输入邮箱'
} ,
{
validator : validateEmail1, trigger : 'change'
}
] ,
'QQ' : [
{
required : true , message : '请输入QQ'
} ,
{
validator : validateQQ, trigger : 'change'
}
] ,
'微信' : [
{
required : true , message : '请输入微信'
} ,
{
validator : validateCharts, trigger : 'change'
}
] ,
'身份证' : [
{
required : true , message : '请输入身份证号'
} ,
{
validator : validateIdCard, trigger : 'change'
}
] ,
'电话' : [
{
required : true , message : '请输入联系电话'
} ,
{
validator : validatPhone, trigger : 'change'
}
] ,
'银行卡' : [
{
required : true , message : '请输入银行卡卡号'
} ,
{
validator : validatBankCard, trigger : 'change'
}
] ,
'留言板' : [
{
required : true , message : '请输入'
} ,
{
validator : async ( RuleObject, value ) => validateInitTxt ( RuleObject, value, 1 , 300 ) , trigger : 'change'
}
] ,
'输入框50' : [
{
required : true , message : '请输入'
} ,
{
validator : async ( RuleObject, value ) => validateInitTxt ( RuleObject, value, 1 , 50 ) , trigger : 'change'
}
] ,
'输入框30' : [
{
required : true , message : '请输入'
} ,
{
validator : async ( RuleObject, value ) => validateInitTxt ( RuleObject, value, 1 , 30 ) , trigger : 'change'
}
] ,
'下拉框' : [
{
required : true , message : '请选择'
}
] ,
'整数' : [
{
required : true , message : '请输入'
} ,
{
validator : validateInitNumber, trigger : 'change'
} ] ,
'组合' : [
{
required : true , message : '请输入'
} ,
{
validator : validatNumberLetter, trigger : 'change'
} ,
] ,
'浮点数' : [
{
required : true , message : '请输入'
} ,
{
validator : validateNumber, trigger : 'change'
} ]
}
二、编辑保存时进行整个表单校验
1、整个表单校验
save(values) {
this.$refs.form.validate(res => {
if (!res) {
this.$message.error('请根据提示信息补全提交的内容信息')
} else {
//此处可以进行数据处理
// 处理完调用接口保存数据
QualificationApi.save(values).then(res => {
this.cancel('List')
})
}
}
})
},
2、单个表单项进行校验
this . $nextTick ( ( ) => {
this . $refs. form. validateField ( 'creditCode' )
this . $refs. form. validateField ( 'registerCapital' )
}