vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)
更新時(shí)間：2023年05月20日 10:05:45 作者：沐沐南
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
el-form表單rule校驗(yàn)(特殊字符、中文、數(shù)字等)
element-UI中el-form帶有檢驗(yàn)功能，用法如下：
<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: {//彈窗輸入框檢驗(yàn)
? ? ? ? ? ? ? ? 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>校驗(yàn)方法有
校驗(yàn)是否包含特殊字符
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;
}校驗(yàn)是否包含特殊字符(路徑專用)
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;
}校驗(yàn)是否包含中文
export function checkChinese(val) {
? ? // 正則匹配非中英文及數(shù)字的字符
? ? let reg = /[\u4e00-\u9fa5]/;
? ? let n = reg.test(val);
? ? if ( n ) {
? ? ? ? return false
? ? }
? ? return true
}校驗(yàn)是否手機(jī)號碼或者固話
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
}校驗(yàn)密碼是否合格
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
}校驗(yàn)非負(fù)浮點(diǎn)數(shù)
export function checkNumberNotNegative(val) {
? ? let reg = /^\d+(\.\d+)?$/;
? ? let n = reg.test(val);
? ? if ( !n ) {
? ? ? ? return false
? ? }
? ? return true
}vue中rules表單驗(yàn)證（常用）
首先在表單中綁定rules，并在item中定義屬性prop：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> ? <el-form-item label="活動(dòng)名稱" 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：是否必選項(xiàng)（此欄是否為空）message：報(bào)錯(cuò)信息trigger：觸發(fā)方式（blur：失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證- 常用：對 input 輸入框的驗(yàn)證
change：當(dāng)值發(fā)生變化時(shí)進(jìn)行驗(yàn)證- 常用：下拉框select，日期選擇框date-picker，復(fù)選框checkbox，單選框radio）
也可以直接用pattern進(jìn)行匹配驗(yàn)證
name: [ { pattern: 驗(yàn)證條件, required: true, message: "提示信息", trigger: "blur" }]vue rules中自帶的校驗(yàn)規(guī)則和常用正則表達(dá)式校驗(yàn)
rules: {
? ? //驗(yàn)證非空和長度
? ? name: [{
? ? ? ? required: true,
? ? ? ? message: "站點(diǎn)名稱不能為空",
? ? ? ? trigger: "blur"
? ? ? ? },{
? ? ? ? min: 3,?
? ? ? ? max: 5,?
? ? ? ? message: '長度在 3 到 5 個(gè)字符',?
? ? ? ? trigger: 'blur'?
? ? }],
? ? //驗(yàn)證數(shù)值
? ? age: [{?
? ? ? ? type: 'number',?
? ? ? ? message: '年齡必須為數(shù)字值',
? ? ? ? trigger: "blur"
? ? }],
? ? //驗(yàn)證日期
? ? birthday:[{?
? ? ? ? type: 'date',?
? ? ? ? required: true,?
? ? ? ? message: '請選擇日期',?
? ? ? ? trigger: 'change'?
? ? }],
? ? //驗(yàn)證多選
? ? habit: [{?
? ? ? ? type: 'array',?
? ? ? ? required: true,?
? ? ? ? message: '請至少選擇一個(gè)愛好',?
? ? ? ? trigger: 'change'?
? ? }],
? ? //驗(yàn)證郵箱
? ? email: [{?
? ? ? ? type: 'email',?
? ? ? ? message: '請輸入正確的郵箱地址',?
? ? ? ? trigger: ['blur', 'change']?
? ? }],
? ? // 驗(yàn)證手機(jī)號
? ? telephone: [{
? ? ? ? pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
? ? ? ? message: "請輸入正確的手機(jī)號碼",
? ? ? ? trigger: "blur"
? ? }],
? ? // 驗(yàn)證經(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"
? ? }],
? ? // 驗(yàn)證維度 整數(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校驗(yàn)規(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.是否手機(jī)號碼或者固話
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.多個(gè)8位數(shù)字格式(yyyyMMdd)并以逗號隔開
pattern:/^\d{8}(\,\d{8})*$/,11.數(shù)字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前兩位是數(shù)字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,13.密碼校驗(yàn)（6-20位英文字母、數(shù)字或者符號（除空格），且字母、數(shù)字和標(biāo)點(diǎn)符號至少包含兩種）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14.中文校驗(yàn)
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
- vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法
- elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
- 使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題
- vue之el-form表單校驗(yàn)以及常用正則詳解
- el-form的model、prop屬性和表單校驗(yàn)等使用
- v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐
- el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼
相關(guān)文章
這篇文章詳細(xì)介紹了Vue.js項(xiàng)目的基本結(jié)構(gòu)和執(zhí)行流程,包括index.html、main.js、App.vue和路由配置的關(guān)系,特別強(qiáng)調(diào)了在index.html中設(shè)置BASE_URL和cdn的使用,以及在main.js中使用render函數(shù)來減少打包體積2025-01-01
基于Vue的側(cè)邊目錄組件的實(shí)現(xiàn)
這篇文章主要介紹了基于Vue的側(cè)邊目錄組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
記錄一個(gè)van-list不斷onLoad加載的坑及解決
這篇文章主要介紹了記錄一個(gè)van-list不斷onLoad加載的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10
Vue 實(shí)現(xiàn)高級穿梭框 Transfer 封裝過程
本文介紹了基于Vue2和Element-UI實(shí)現(xiàn)的高級穿梭框組件Transfer的設(shè)計(jì)與技術(shù)方案,組件支持多項(xiàng)選擇,并能實(shí)時(shí)同步已選擇項(xiàng),包含豎版和橫版設(shè)計(jì)稿,并提供了組件的使用方法和源碼,此組件具備本地分頁和搜索功能,適用于需要在兩個(gè)列表間進(jìn)行數(shù)據(jù)選擇和同步的場景2024-09-09
Vue路由的模塊自動(dòng)化與統(tǒng)一加載實(shí)現(xiàn)
這篇文章主要介紹了Vue路由的模塊自動(dòng)化與統(tǒng)一加載實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue中Table組件Select的勾選和取消勾選事件詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要給大家介紹了關(guān)于vuex刷新后數(shù)據(jù)丟失的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對話框
最近遇到了個(gè)需求是使用element-ui插件編寫頁面,點(diǎn)擊按鈕,彈出對話框,這篇文章主要給大家介紹了關(guān)于Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對話框的相關(guān)資料,需要的朋友可以參考下2022-11-11