拼团微信小程序_详解vue怎么使用rules对表单字段

2021-01-08 11:55 admin
详解vue如何使用rules对表单字段进行校验       这篇文章主要介绍了详解vue如何使用rules对表单字段进行校验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
 Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" 
 FormItem prop="phone" 
 Input v-model="form.phone" prefix="md-person" placeholder="请输入您的手机号" size="large" :maxlength="11" /Input 
 /FormItem 
 FormItem prop="password" 
 Input type="password" v-model="form.password" prefix="md-lock" placeholder="请输入您的密码" size="large" :maxlength="100" /Input 
 /FormItem 
 FormItem prop="code" 
 Input v-model="form.code" placeholder="请输入验证码" prefix="ios-barcode" size="large" :maxlength="4" /Input 
 img @click="refLoginImg" :src="loginImgSrc" / 
 /FormItem 
 FormItem 
 Button @click="handleSubmit" :loading="submitLoading" type="info" long size="large" icon="md-log-in" 
 span v-if="!submitLoading" 立即登录 /span 
 span v-else 正在登录,请稍候... /span 
 /Button 
 /FormItem 
 /Form 

2.新建一个文件(validate.js)定义验证规则

/** 这个文件只允许放表单验证方法 **/
//验证手机号
export function isPhone(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 var pattern = /^1[34578]\d{9}$/
 if(pattern.test(value)){
 return callback()
 return callback(new Error('输入的手机号错误'))

3、在页面(xx.vue)中引入验证规则定义的文件,并在export default中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发} validator

rules: {
 phone: [
 { required: true, message: '手机号不能为空', trigger: 'blur' },
 { type: 'string', min: 11, message: '手机号不允许小于11位', trigger: 'blur' },
 { validator: isPhone, trigger: 'blur' },
 password: [
 { required: true, message: '密码不能为空', trigger: 'blur' },
 { type: 'string', min: 6, message: '密码不允许小于6位', trigger: 'blur' },
 code: [
 { required: true, message: '验证码不能为空', trigger: 'blur' },
 { type: 'string', min: 4, message: '验证码必须是4位', trigger: 'blur' },

以下是validator.js文件的部分验证方法

/* 是否是公司邮箱*/
export function Email(str) {
 const reg = /^[a-z0-9]( :[-_.+] [a-z0-9]+)*@\.com$/i;
 return reg.test(str.trim());
/* 合法uri*/
export function al) {
 const urlregex = /^(htt凡科抠图 |ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9. %$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9] )(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9] [0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov||org||name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9., '\\+ %$#=~_-]+))*$/;
 return urlregex.al);
// 验证是否整数
export function isInteger(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 setTimeout(() = {
 if (!Number(value)) {
 callback(new Error('请输入正整数'));
 } else {
 const re = /^[0-9]*[1-9][0-9]*$/;
 const rsCheck = re.test(value);
 if (!rsCheck) {
 callback(new Error('请输入正整数'));
 } else {
 callback();
 }, 1000);

} else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入在[0-65535]之间的端口值')); } else { callback(); }, 1000); /* 小写字母*/ export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str); }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。