vue（element）、uniapp常用的几种表单校验

置顶 Change!!

已于 2023-01-11 10:05:46 修改

阅读量3.6k

点赞数 4

分类专栏： vue 表单校验文章标签： vue.js 前端 javascript

于 2021-10-22 15:26:47 首次发布

本文链接：https://blog.csdn.net/weixin_46172085/article/details/120906612

版权

vue 同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

表单校验

2 篇文章 0 订阅

订阅专栏

为了减少代码冗余量，这里采用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();
},