vue(element)、uniapp常用的几种表单校验

为了减少代码冗余量,这里采用element中的rules来进行校验,也可以通过手动判断实现
1.输入框/下拉选不能为空

name:[{ required: true, message: '不能为空',trigger: 'blur' }],
sex:[{ required: true, message: '不能为空',trigger: 'change' }],

2.手机号:

phone:[
  { required: true, message: '不能为空',trigger: 'blur' },
  { pattern: "^[1][3,4,5,6,7,8,9][0-9]{9}$", message: "请输入正确的手机号码", trigger: "blur" }
],

3.身份证号码:

idcard:[
 { required: true, message: '不能为空',trigger: 'blur' },
 { pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/, message: '请输入正确的身份证号',trigger: 'blur' },
],//身份证号

4.邮箱:

 email: [
   {
     type: "email",
     message: "'请输入正确的邮箱地址",
     trigger: ["blur", "change"]
   }
 ],

5.银行卡号:

bankCardNumber:[
{ required: true, message: '不能为空',trigger: 'blur'},
{validator: bankAccountValid, message: '请输入正确的银行卡号',trigger: 'blur' }
],
//bankAccountValid如下,放到data中,return外边即可
var bankAccountValid = (rule, value, callback) => {
	const strBin = '10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99'
	if (!value) {
	  return callback(new Error('银行卡号不能为空'))
	} else if (!Number.isInteger(+value)) {
	  callback(new Error('银行卡号必须全为数字'))
	} else if (value.trim().length < 12 || value.trim().length > 19) {
	  callback(new Error('银行卡号长度必须在12到19之间'))
	} else if (strBin.indexOf(value.substring(0, 2)) === -1) {
	  callback(new Error('银行卡号开头6位不符合规范'))
	} else {
	  callback()
	}
}

6.客服电话-校验手机格式和座机都能用(座机格式很多-待完善中)
例:400-990-2300,12315,010-87654321

 servicePhone: [
 { required: true, message: "请输入客服电话", trigger: "blur" },
    {
     validator: function (rule, value, callback) {
       if (
         !/^1[34578]\d{9}$/.test(value) &&
         !/^(\d{3,4}-)?\d{7,8}$/.test(value)
       ) {
         callback(new Error("请输入正确的手机号/座机号码"));
       } else {
         callback();
       }
     },
     trigger: "blur",
   },
 ],

7.禁止输入中文(例:社会信用代码,只能是数组和字母组成)
方法1第一次输入汉字,输入框还是会有汉字出现,推荐用方法2,更简便。
方法1:

enterpriseCode: [
  { required: true, message: "请输入社会信用代码", trigger: "blur" },
   { validator: checkChinese, trigger: 'change'}
],
data中,return外部,也可以写到methods中,直接this.checkChinese调用
var  checkChinese = (rule, value, callback)=> {
   if (value) {
     if (/[\u4E00-\u9FA5]/g.test(value)) {
       callback(new Error('社会信用代码不能输入汉字!'));
     } else {
       callback();
     }
   }
   callback();
 };

方法2:
onkeyup = “value=value.replace(/[\u4e00-\u9fa5/\s+/]/ig,‘’)”

<el-form-item label="社会信用代码" prop="enterpriseCode">
  <el-input
  	onkeyup = "value=value.replace(/[\u4e00-\u9fa5/\s+/]/ig,'')" 
    maxlength="18"
    placeholder="请输入社会信用代码"
    v-model="personalForm.enterpriseCode"
  ></el-input>
</el-form-item>

8.只能输入中文

onkeyup = "value=value.replace(/[^\u4e00-\u9fa5]/g, '')" 

9.密码:6-20位数字和大小写字母组合

var reg = /^[\da-zA-Z]{6,20}$/   //{6}则表示长度6位
if (!reg.test(this.form.password)) {
	return this.$message.warning('密码为6-20位数字和字母组合')
}

10.element el-input-number数字/金额输入框,限制2位小数,最小值0,controls是否显示加减按钮

<el-input-number v-model="scope.row.price" :precision='2' :min='0' :controls="false" style="width: 100%;"/>

11.只能输入1-90/1-100的整数(JS)
通过onkeyup控制只能输入数字,Verify控制只能输入1-90

onkeyup="value=value.replace(/[^0-9]/g,'')" @input="Verify"
Verify(value) { //1-90整数 	
	if (value < 1 || value > 90) {
		this.Val = value.replace('')
		return this.$message.error('请输入1~90的整数!')
	}
},

10.字母、数字、特殊字符组合,必须包含特殊字符 有空更新~~

二、uniapp校验,都是vue能否通用,自己试试吧~

1.金额精确到小数点后两位(uniapp),vue有空更新小数点。
第一种方法:输入框输入时正则过滤

//html
<view>
	<input type="digit" v-model="balance" @input="applycheck()" placeholder="提现金额(元)"/>
</view>
applycheck(e) {//js
	//正则表达试
	e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
	//重新赋值给input
	this.$nextTick(() => {
		this.balance = e.target.value
	})
},

第二种方法:提交时做判断

apply() {
	let dotPos = this.balance.indexOf(".")
	let length = this.balance.length
	console.log(dotPos,222)
	console.log(length,333)
	if (length - dotPos > 3) {
		uni.showToast({
			title: "提现金额只能精确到小数点后两位",
			duration: 2000,
			icon: 'none'
		})
		return
	}
}	

2.只能输入数字和字母。(输入小写自动转大写)

<view>
	<input v-model="SendReturnQuery.logisticsNum"  @input="onKeyInInput" type="text" placeholder-class="fs28" placeholder="请填写" class="r-box-input"></input>
</view>
onKeyInInput(event){//数字和字母(物流单号)
	// var value = event.detail.value.toUpperCase()//小写转大写
	var value = event.detail.value
	// const rule = /[^0-9A-Z]/g  //数组和大写字母
	const rule = /[\W]/g//数字和字母
	this.$nextTick(() => {
	   this.SendReturnQuery.logisticsNum = value.replace(rule, '')
	})
}

3.只能输入数字和小数点
行内

@keyup="val= val.replace(/[^\d.]/g,'')"

JS:

 // /[^\d]/g  数字 //[^\d.]/g  只能输入数字和小数点
测试说:要看到提示信息,所以这里采用了rules的方法 (由于项目框架比较老,更好的方法晚点更新)
 rules: {
  params1: [
	  { required: true, message: '请输入金额', trigger: 'blur' },//非必填,去掉就行,只校验checkChineseEdit
	  { validator: this.checkChineseEdit, trigger: 'blur' }
  ],
 }  
checkChineseEdit (rule, value, callback) {
   this.editForm.params1= parseFloat(value).toFixed(2);//转为两位小数
   if( this.editForm.params1== "NaN" ){ //parseFloat 后NaN-bug
	  this.editForm.params1= ""
   }
   if (value) {
	 if(value<0){
	   this.editForm.params1 = ''
	   callback(new Error('金额最小为0!'));//不能为负数
	 } 
     if (/[^\d.]/g.test(value)) {//只能输入小数、小数点
	   this.editForm.params1 = ''
       callback(new Error('请输入合法的金额!'));
     }else {
       callback();
     }
   }
   callback();
},

你可能感兴趣的:(vue,表单校验,vue.js,前端,javascript)