vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等)
更新時間：2023年05月20日 10:05:45 作者：沐沐南
這篇文章主要介紹了vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
el-form表單rule校驗(特殊字符、中文、數(shù)字等)
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="聯(lián)系方式" prop="phone">
? ? ? ? ? ? ? ? <el-input v-model.number="form.phone"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? <el-button type="primary" @click="onSubmit">立即創(chuàng)建</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("請正確輸入聯(lián)系方式??！"));
? ? ? ? ? ? } 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: "請輸入聯(lián)系方式",trigger: "blur"},
? ? ? ? ? ? ? ? ? { validator: validateInputPhone, trigger: "blur" }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? //提交表單
? ? ? ? onSubmit(){
? ? ? ? ? ? this.$refs['userform'].validate((valid) => {
? ? ? ? ? ? ? ? if (valid) {
? ? ? ? ? ? ? ? ? ? //TODO 調(diào)用接口提交數(shù)據(jù)
? ? ? ? ? ? ? ? }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) {
? ? // 正則匹配非中英文及數(shù)字的字符
? ? 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
}校驗非負浮點數(shù)
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規(guī)則：
rules {?? ?
? ? ? name: [ { type: 'string',required: true,message: "名稱必填", trigger: 'blur'}, {max: 30,message: "名稱長度不能超過30位" }]
? ? ? }其中name為prop名
type：類型required：是否必選項（此欄是否為空）message：報錯信息trigger：觸發(fā)方式（blur：失去焦點時進行驗證- 常用：對 input 輸入框的驗證
change：當值發(fā)生變化時進行驗證- 常用：下拉框select，日期選擇框date-picker，復(fù)選框checkbox，單選框radio）
也可以直接用pattern進行匹配驗證
name: [ { pattern: 驗證條件, required: true, message: "提示信息", trigger: "blur" }]vue rules中自帶的校驗規(guī)則和常用正則表達式校驗
rules: {
? ? //驗證非空和長度
? ? name: [{
? ? ? ? required: true,
? ? ? ? message: "站點名稱不能為空",
? ? ? ? trigger: "blur"
? ? ? ? },{
? ? ? ? min: 3,?
? ? ? ? max: 5,?
? ? ? ? message: '長度在 3 到 5 個字符',?
? ? ? ? trigger: 'blur'?
? ? }],
? ? //驗證數(shù)值
? ? age: [{?
? ? ? ? type: 'number',?
? ? ? ? message: '年齡必須為數(shù)字值',
? ? ? ? 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"
? ? }],
? ? // 驗證經(jīng)度 整數(shù)部分為0-180小數(shù)部分為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: "整數(shù)部分為0-180,小數(shù)部分為0到7位",
? ? ? ? trigger: "blur"
? ? }],
? ? // 驗證維度 整數(shù)部分為0-90小數(shù)部分為0到7位
? ? latitude: [{
? ? ? ? pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
? ? ? ? message: "整數(shù)部分為0-90,小數(shù)部分為0到7位",
? ? ? ? trigger: "blur"
? ? }] ? ? ? ? ?
}前端Vue中常用rules校驗規(guī)則
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.整數(shù)填寫
pattern:/^-?[1-9]\d*$/,
6.正整數(shù)填寫
pattern:/^[1-9]\d*$/,
7.小寫字母
pattern:/^[a-z]+$/,
8.大寫字母
pattern:/^[A-Z]+$/,
9.大小寫混合
pattern:/^[A-Za-z]+$/,
10.多個8位數(shù)字格式(yyyyMMdd)并以逗號隔開
pattern:/^\d{8}(\,\d{8})*$/,11.數(shù)字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前兩位是數(shù)字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,13.密碼校驗（6-20位英文字母、數(shù)字或者符號（除空格），且字母、數(shù)字和標點符號至少包含兩種）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14.中文校驗
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue在解析我們的組件時， 是通過打包成一個 js 文件，當我們的一個組件 引入過多子組件是，頁面的首屏加載時間 由最后一個組件決定 優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下2022-12-12
vue-element-admin+flask實現(xiàn)數(shù)據(jù)查詢項目的實例代碼
這篇文章主要介紹了vue-element-admin+flask實現(xiàn)數(shù)據(jù)查詢項目,填寫數(shù)據(jù)庫連接信息和查詢語句，即可展示查詢到的數(shù)據(jù)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了項目nginx部署到非根目錄下vue配置方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue服務(wù)端渲染頁面緩存和組件緩存的介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下2018-09-09
這篇文章主要介紹了VSCode配置啟動Vue項目，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue中移動端調(diào)取本地的復(fù)制的文本方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)打卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了如何基于Vue3編寫一個簡單的播放器，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-03-03