vue之el-form表單校驗以及常用正則詳解
更新時間：2023年05月20日 09:49:43 作者：苜可
這篇文章主要介紹了vue之el-form表單校驗以及常用正則，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
el-form表單校驗以及常用正則
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
? <el-form-item label="表單字段" prop="str">
? ? <el-input v-model="ruleForm.str"></el-input>
? </el-form-item>
? <el-form-item>
? ? <el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
? ? <el-button @click="resetForm('ruleForm')">重置</el-button>
? </el-form-item>
</el-form>
<script>
? export default {
? ? data() {
? ? ? const checkFinanceCode = (rule, value, callback) => {
? ? ? ? if (value) {
? ? ? ? ? var reg = /^[A-Za-z0-9_]+$/
? ? ? ? ? if (reg.test(value) === false) {
? ? ? ? ? ? callback(new Error('只可輸入英文數(shù)字和下劃線'))
? ? ? ? ? } else {
? ? ? ? ? ? callback()
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? callback()
? ? ? ? }
? ? ? }
? ? ? return {
? ? ? ? ruleForm: {
? ? ? ? ? str: '',
? ? ? ? },
? ? ? ? rules: {
? ? ? ? ? str: [
? ? ? ? ? ? { required: true, message: '請輸入活動名稱', trigger: 'blur' }, // 限制必填
? ? ? ? ? ? { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }, // 限制字符串長度
? ? ? ? ? ? { required: true, trigger: 'blur', validator: checkFinanceCode } // 自定義正則
? ? ? ? ? ]
? ? ? ? }
? ? ? };
? ? },
? ? methods: {
? ? ? submitForm(formName) {
? ? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? ? if (valid) {
? ? ? ? ? ? alert('submit!');
? ? ? ? ? } else {
? ? ? ? ? ? console.log('error submit!!');
? ? ? ? ? ? return false;
? ? ? ? ? }
? ? ? ? });
? ? ? },
? ? ? resetForm(formName) {
? ? ? ? this.$refs[formName].resetFields();
? ? ? }
? ? }
? }
</script>下面記錄一下常用正則，大家發(fā)現(xiàn)錯誤，或者有更好的評論區(qū)提出來，我一并添加修改，方便大家下次直接用
// 數(shù)字類型
數(shù)字：/^[0-9]*$/
n位的數(shù)字：/^\d{n}$/
至少n位的數(shù)字：/^\d{n,}$/
m-n位的數(shù)字：/^\d{m,n}$/
價格：/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
零和非零開頭的數(shù)字：/^(0|[1-9][0-9]*)$/
非零開頭的最多帶兩位小數(shù)的數(shù)字：/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/
帶1-2位小數(shù)的正數(shù)或負(fù)數(shù)：/^(\-)?\d+(\.\d{1,2})$/
正數(shù)、負(fù)數(shù)、和小數(shù)：/^(\-|\+)?\d+(\.\d+)?$/
有兩位小數(shù)的正實數(shù)：/^[0-9]+(\.[0-9]{2})?$/
有1~3位小數(shù)的正實數(shù)：/^[0-9]+(\.[0-9]{1,3})?$/
非零的正整數(shù)：/^[1-9]\d*$/ 或 /^([1-9][0-9]*){1,3}$/ 或 /^\+?[1-9][0-9]*$/
非零的負(fù)整數(shù)：/^\-[1-9][]0-9"*$/ 或 /^-[1-9]\d*$/
非負(fù)整數(shù)：/^\d+$/ 或 /^[1-9]\d*|0$/
非正整數(shù)：/^-[1-9]\d*|0$/ 或 /^((-\d+)|(0+))$/
非負(fù)浮點數(shù)：/^\d+(\.\d+)?$/ 或 /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/
非正浮點數(shù)：/^((-\d+(\.\d+)?)|(0+(\.0+)?))$/ 或 /^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/
正浮點數(shù)：/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/ 或 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
負(fù)浮點數(shù)：/^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/ 或 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
浮點數(shù)：/^(-?\d+)(\.\d+)?$/ 或 /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/
// 其他特殊校驗
4~20位英文+數(shù)字: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
大寫英文: /^[A-Z]+$/
郵箱: /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+)$/ 或 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
手機: /^1[3456789]\d{9}$/ 或 /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
只能漢字: /^[\u4e00-\u9fa5]{0,}$/
電話號碼: ("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：/^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/
強密碼(必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長度在 8-10 之間)：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
強密碼(必須包含大小寫字母和數(shù)字的組合，可以使用特殊字符，長度在8-10之間)：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/el-form前端表單校驗步驟
(1)，F(xiàn)orm組件提供了表單驗證的功能，只需要通過rules屬性傳入約定的驗證規(guī)則，并將Form-Item的prop屬性設(shè)置為需校驗的字段名即可。
<el-form :model="formData" :rules="rules" ref="form"> ? ? <el-form-item label="活動名稱" prop="name"> ? ? ? ? <el-input v-model="formData.name" /> ? ? </el-form-item> </el-form> <el-button @click="submit">提交</el-button>
(2)，data->return里面加上formData,在這里寫上限定條件，通過rules屬性傳入約定的驗證規(guī)則
<script>
? ? export default {
? ? ? ? return {
? ? ? ? ? ? name:''
? ? ? ? },
? ? ? ? const nameValidator = (rule,value,callback)=>{ 校驗內(nèi)容 },
? ? ? ? rules:{
? ? ? ? ? ? name:[
? ? ? ? ? ? ? ? { required: true(不填的時候提示不能為空), message: '請輸入活動名稱', trigger: 'blur'(失去焦點的時候觸發(fā)) },
? ? ? ? ? ? ? ? // 第一條驗證復(fù)合要求時，才會執(zhí)行第二條
? ? ? ? ? ? ? ? { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' },
? ? ? ? ? ? ? ? // 第二條驗證復(fù)合要求時，才會執(zhí)行第三條
? ? ? ? ? ? ? ? { validator: nameValidator(限定條件), trigger:'blur' }
? ? ? ? ? ? ]
? ? ? ? }
? ? }
</script>(3)，提交驗證
methods:{
? ? submit(){
? ? ? ? this.$refs.form.validate(pass => {
? ? ? ? ? ? if(!pass) return;
? ? ? ? ? ? 需要執(zhí)行的代碼
? ? ? ? })
? ? }
}例子
// 如果設(shè)備名稱是鉛筆，設(shè)備分類就為行政辦公設(shè)備
<template>
? ? <el-form :model="formData" :rules="rules" ref="form">
? ? ? ? <el-form-item label="活動名稱" prop="name">
? ? ? ? ? ? <el-input v-model="formData.name" />
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="設(shè)備分類" prop="category">
? ? ? ? ? ? <el-select v-model="formData.category" placeholder="請選擇">
? ? ? ? ? ? ? ? <el-option v-for="d in $store.state.categoryList" :key="d.id" :label="d.name" :value="d.id" ></el-option>
? ? ? ? ? ? </el-select>
? ? ? ? </el-form-item>
? ? </el-form>
? ? <el-button type="primary" @click="submit">提交</el-button>
</template>
<script>
? ? export default {
? ? ? ? data(){
? ? ? ? ? ? // 獲取的數(shù)據(jù)是從vuex中獲取的
? ? ? ? ? ? const nameValidator = (rule,value,callback)=>{
? ? ? ? ? ? ? ? // 只判斷鉛筆是辦公用品，只是例子
? ? ? ? ? ? ? ? const { category } = this.formData;
? ? ? ? ? ? ? ? const cName = this.$store.getters.categoryObj[category].name;
? ? ? ? ? ? ? ? if(value === '鉛筆' && category && category !== 'CATE9'){
? ? ? ? ? ? ? ? ? ? callback(new Error(`鉛筆不屬于${cName}`))
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? callback();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? const categoryValidator = (rule,value,callback) => {
? ? ? ? ? ? ? ? // 調(diào)用別的表單項的校驗
? ? ? ? ? ? ? ? this.$refs.form.validateField('name');
? ? ? ? ? ? ? ? callback();
? ? ? ? ? ? },
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? formData:{
? ? ? ? ? ? ? ? ? ? name:'',
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? rules:{
? ? ? ? ? ? ? ? name:[
? ? ? ? ? ? ? ? ? ? { required: true, message: '請輸入設(shè)備名稱', trigger: 'blur' },
? ? ? ? ? ? ? ? ? ? { validator: nameValidator, trigger:'blur' }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? category:[
? ? ? ? ? ? ? ? ? ? { required: true, message: '請選擇設(shè)備分類', trigger: 'change' },
? ? ? ? ? ? ? ? ? ? { validator: categoryValidator, trigger:'change' }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? submit(){
? ? ? ? ? ? ? ? this.$refs.form.validate(pass => {
? ? ? ? ? ? ? ? ? ? if(!pass) return;
? ? ? ? ? ? ? ? ? ? this.submiting=true;
? ? ? ? ? ? ? ? ? ? axios.post('/pre-edit',this.formData).then(res =>{
? ? ? ? ? ? ? ? ? ? ? ? this.submiting=false;
? ? ? ? ? ? ? ? ? ? ? ? if(!res.code){
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$message.success('編輯成功');
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$router.back();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實例教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要給大家介紹了關(guān)于vue瀏覽器返回監(jiān)聽的具體步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue 實現(xiàn)無規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要給大家介紹了關(guān)于如何使用Vue3構(gòu)建一個圖像畫廊(支持圖片上傳)的相關(guān)資料,Vue畫廊這是vue編寫的圖庫應(yīng)用程序,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中巧用三元表達式解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇淺談vue同一頁面中擁有兩個表單時,的驗證問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3中的組件間的傳值(props)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家學(xué)習(xí)介紹了如何利用Vue2實現(xiàn)全局水印的效果，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以了解下2023-07-07
這篇文章主要介紹了通過Vue實現(xiàn)淘寶購物車中三級選中的功能，文中的實現(xiàn)過程講解詳細，對我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
本文給大家介紹了使用vuex的state狀態(tài)對象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04