vue中的el-form表单rule校验问题(特殊字符、中文、数字等)
作者:沐沐南
这篇文章主要介绍了vue中的el-form表单rule校验问题(特殊字符、中文、数字等),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
el-form表单rule校验(特殊字符、中文、数字等)
element-UI中el-form带有检验功能,用法如下:
<template> <div> <el-form size="small" ref="userform" :rules="rulesForm" :model="form"> <el-form-item label="用户名" prop="userName"> <el-input v-model.trim="form.userName" :disabled="addUserDialogTitle == '编辑用户'"></el-input> </el-form-item> <el-form-item label="联系方式" prop="phone"> <el-input v-model.number="form.phone"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> </el-form-item> </el-form> </div> </template> <script> import { checkSpecialKey,validateInputPhone } from '@/api/check' export default { name: 'userList', data () { let validateInputSpecialKey = (rule, value, callback) => { if (!checkSpecialKey(value)) { callback(new Error("不能含有特殊字符!!")); } else { callback(); } }; let validateInputPhone = (rule, value, callback) => { if (!checkPhone(value)) { callback(new Error("请正确输入联系方式!!")); } else { callback(); } }; return { form:{}, rulesForm: {//弹窗输入框检验 userName: [ { required: true,message: "请输入用户名",trigger: "blur"}, { min: 3,max: 10,message: "长度在 3 - 10 字符" }, { validator: validateInputSpecialKey, trigger: "blur" } ], phone:[ { required: true,message: "请输入联系方式",trigger: "blur"}, { validator: validateInputPhone, trigger: "blur" } ] } } }, methods:{ //提交表单 onSubmit(){ this.$refs['userform'].validate((valid) => { if (valid) { //TODO 调用接口提交数据 }else{ return false } }) } } } </script>
校验方法有
校验是否包含特殊字符
export function checkSpecialKey(str) { let specialKey = "[`~!#$^&*()=|{}':;'\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'"; for (let i = 0; i < str.length; i++) { if (specialKey.indexOf(str.substr(i, 1)) != -1) { return false; } } return true; }
校验是否包含特殊字符(路径专用)
export function checkSpecialKeyPath(str) { let specialKey = "[`~!#$^&*()=|{}';'<>?~!#¥……&*()——|{}【】‘;”“'。,、?]‘'"; for (let i = 0; i < str.length; i++) { if (specialKey.indexOf(str.substr(i, 1)) != -1) { return false; } } return true; }
校验是否包含中文
export function checkChinese(val) { // 正则匹配非中英文及数字的字符 let reg = /[\u4e00-\u9fa5]/; let n = reg.test(val); if ( n ) { return false } return true }
校验是否手机号码或者固话
export function checkPhone(val) { let reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/; let n = reg.test(val); if ( !n ) { return false } return true }
校验密码是否合格
export function checkPassword(val) { let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/; let n = reg.test(val); if ( !n ) { return false } return true }
校验非负浮点数
export function checkNumberNotNegative(val) { let reg = /^\d+(\.\d+)?$/; let n = reg.test(val); if ( !n ) { return false } return true }
vue中rules表单验证(常用)
首先在表单中绑定rules,并在item中定义属性prop:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form>
在data或computed中编写rules规则:
rules { name: [ { type: 'string',required: true,message: "名称必填", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }] }
其中name为prop名
type
:类型required
:是否必选项(此栏是否为空)message
:报错信息trigger
:触发方式(blur
:失去焦点时进行验证- 常用:对 input 输入框的验证
change
:当值发生变化时进行验证- 常用:下拉框select,日期选择框date-picker,复选框checkbox,单选框radio)
也可以直接用pattern进行匹配验证
name: [ { pattern: 验证条件, required: true, message: "提示信息", trigger: "blur" }]
vue rules中自带的校验规则和常用正则表达式校验
rules: { //验证非空和长度 name: [{ required: true, message: "站点名称不能为空", trigger: "blur" },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }], //验证数值 age: [{ type: 'number', message: '年龄必须为数字值', trigger: "blur" }], //验证日期 birthday:[{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }], //验证多选 habit: [{ type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }], //验证邮箱 email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }], // 验证手机号 telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }], // 验证经度 整数部分为0-180小数部分为0到7位 longitude: [{ pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, message: "整数部分为0-180,小数部分为0到7位", trigger: "blur" }], // 验证维度 整数部分为0-90小数部分为0到7位 latitude: [{ pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/, message: "整数部分为0-90,小数部分为0到7位", trigger: "blur" }] }
前端Vue中常用rules校验规则
1、是否合法IP地址:
pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
2.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
4.是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5.整数填写
pattern:/^-?[1-9]\d*$/,
6.正整数填写
pattern:/^[1-9]\d*$/,
7.小写字母
pattern:/^[a-z]+$/,
8.大写字母
pattern:/^[A-Z]+$/,
9.大小写混合
pattern:/^[A-Za-z]+$/,
10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,
11.数字加英文,不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,
13.密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。