vueelementuiform表單驗證的實現(xiàn)

最近我們公司將前端框架由easyui 改為 vue+elementui 。自學(xué)vue兩周就開始了爬坑之路。業(yè)余時間給大家分享一下心得，技術(shù)新手加上第一次分享(小激動)，有什么不足的地方歡迎大家指正，多多交流才能共同進(jìn)步！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),鑲黃企業(yè)網(wǎng)站建設(shè),鑲黃品牌網(wǎng)站建設(shè),網(wǎng)站定制,鑲黃網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鑲黃網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

1.問題我們公司的項目比較大表格表單的頁面都不勝數(shù) ，基于此封裝了一些可復(fù)用的代碼。

2.分析 vue給了我們不一樣的前端代碼體驗 element ui 給我們一套功能強(qiáng)大的組件減少了我們大量的開發(fā)時間。雙劍合璧天下無敵！但每個公司的代碼風(fēng)格不同用戶的要求也比較刁端 ui團(tuán)隊設(shè)計完美我們怎樣才能用這個兩把劍闖出自己的江湖就需要大家好好琢磨了。

廢話不多說！進(jìn)入正題

form表單驗證規(guī)則的封裝

1.ellementui的處理 1. Form 組件上一次性傳遞所有的驗證規(guī)則 2 .單個的表單域上傳遞屬性的驗證規(guī)則。

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 <el-form-item
  prop="email"
  label="郵箱"
  :rules="[
   { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
   { type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change' }
  ]"
 >
 <el-input v-model="dynamicValidateForm.mobil"></el-input>
 </el-form-item>
 <el-form-item 
  label="姓名:" 
  prop="name" 
  :rules="[{ required: true, message: '請輸入姓名', trigger: 'blur' }]">
 <el-input v-model="dynamicValidateForm.name"></el-input>
</el-form-item>
<el-form-item label="手機(jī)號:" prop="mobil" 
  :rules="filter_rules({required:true,type:'mobile'})">
  <el-input v-model="dynamicValidateForm.mobil"></el-input>
</el-form-item>

</el-form>

觀察上面的代碼有一個共性單個的表單域上傳遞屬性的驗證規(guī)則，給rules 屬性一個數(shù)組

重點來了 19行代碼是什么意思？？？？

這就是我們封裝的全局可復(fù)用的方法傳入需要的參數(shù),你就可以得到你想要的驗證規(guī)則 rules 數(shù)組

在我們的工具包建一個 js文件我們的全局方法就有了

exports.install = function (Vue, options) {

  Vue.prototype.filter_rules = function (item){  
  
    return [{},{}]
    
   }
  

}

還要在main.js 中注冊

vue elementui form表單驗證的實現(xiàn)

下面分享下我的js文件

import { validateMoneyNumber,qq,mobile,regexn,integer} from '@/utils/validate'

exports.install = function (Vue, options) {
  
  
  /**
   * 注意: 定義type 規(guī)則時 不用做非空驗證 
   *    只需要傳入 required:true 即可
   * */
  /*保留兩位小數(shù)*/
  const isvalidateMoney = (rule, value, callback) => {
    if(value != null && value != "") {
      if(!validateMoneyNumber(value)) {
      callback(new Error('請輸入正確的數(shù)字，最多保留兩位小數(shù)!'))
      } else {
        callback()
      }
    }
    else{
      callback();
    }
  }
  /*驗證QQ號碼*/
  const isvalidateQQ= (rule, value, callback) => {    
    if(value != null && value != "") {
      if(!qq(value)) {
        callback(new Error('您輸入的QQ號不正確!'))
      } else {
        callback()
      }
    }
    else{
      callback();
    }
  }
  /*驗證手機(jī)號*/
    const isvalidateMobile= (rule, value, callback) => {    
    if(value != null && value != "") {
      if(!mobile(value)) {
        callback(new Error('您輸入的手機(jī)號不正確!'))
      } else {
        callback()
      }
    }
    else{
      callback();
    }
  }
    
    /*含有非法字符(只能輸入字母、漢字)*/
    const isvalidateRegexn= (rule, value, callback) => {    
    if(value != null && value != "") {
      if(!regexn(value)) {
        callback(new Error('含有非法字符(只能輸入字母、漢字)!'))
      } else {
        callback()
      }
    }
    else{
      callback();
    }
  }
    /*請輸入正整數(shù)*/
    const isvalidateInteger= (rule, value, callback) => {    
    if(value != null && value != "") {
      if(!integer(value)) {
        callback(new Error('請輸入正整數(shù)!'))
      } else {
        callback()
      }
    }
    else{
      callback();
    }
  }
  
  
  
  
  /**
   * 參數(shù) item 
   * required true 必填項
   * maxLength 字符串的最大長度
   * min 和 max 必須同時給 min < max type=number
   * type 手機(jī)號 mobile
   *   郵箱  email
   *   網(wǎng)址  url 
   *   各種自定義類型  定義在 src/utils/validate 中  持續(xù)添加中.......
   * */
  
  Vue.prototype.filter_rules = function (item){
    let rules = [];
    if(item.required){
      rules.push({ required: true, message: '該輸入項為必填項!', trigger: 'blur' });
    }
    if(item.maxLength){
      rules.push({ min:1,max:item.maxLength, message: '最多輸入'+item.maxLength+'個字符!', trigger: 'blur' })
    }
    if(item.min&&item.max){    
      rules.push({ min:item.min,max:item.max, message: '字符長度在'+item.min+'至'+item.max+'之間!', trigger: 'blur' })
    }
    if(item.type){
      let type = item.type;
      switch(type) {
        case 'email':
          rules.push({ type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change' });
          break;
        case 'qq':
          rules.push( { validator: isvalidateQQ, trigger: 'blur,change' });
          break;
        case 'mobile':
          rules.push( { validator: isvalidateMobile, trigger: 'blur,change' });
          break;  
        case 'regexn':
          rules.push( { validator: isvalidateRegexn, trigger: 'blur,change' });
          break;  
        case 'integer':
          rules.push( { validator: isvalidateInteger, trigger: 'blur,change' });
          break;    
        default:
          rule.push({});
          break;
      }
    }
    
   
    return rules;
  };
};

看明白了嗎第一行是引入各種正則表達(dá)式然后自定義校驗規(guī)則。傳入你自定義的參數(shù) 就可以拿到你想要的規(guī)則（很熟悉吧參考 easyui 表單驗證）

下面是效果

vue elementui form表單驗證的實現(xiàn)

ElementUi rules表單驗證

可以在pattern中書寫正則，并且配合elementUI進(jìn)行表單驗證。
pattern 屬性規(guī)定用于驗證輸入字段的模式。模式指的是正則表達(dá)式。

rules: {
  name:[{
    required: true,
    message: '請輸入用戶名',
    trigger: 'blur'
    },{
    min: 2,
    max: 5,
    message: '長度在 2 到 5 個字符'
    },{
    pattern: /^[\u4E00-\u9FA5]+$/,
    message: '用戶名只能為中文'
  }
    //{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母開頭，長度在2-5之間， 只能包含字符、數(shù)字和下劃線'}
  ],
  password: [{
    required: true,
    message: '請輸入密碼',
    trigger: 'blur'
  }, {
    min: 6,
    max: 30,
    message: '長度在 6 到 30 個字符'
  }, {
    pattern: /^(\w){6,20}$/,
    message: '只能輸入6-20個字母、數(shù)字、下劃線'
  }],
  mobile:[{ 
    required: true,
    message: '請輸入手機(jī)號碼',
    trigger: 'blur'
  },
  {validator:function(rule,value,callback){
      if(/^1[34578]\d{9}$/.test(value) == false){
        callback(new Error("請輸入正確的手機(jī)號"));
      }else{
        callback();
      }
    }, trigger: 'blur'}
  ],
  //  pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機(jī)號碼' }
  peopleID:[{
    required: true,
    message: '請輸入身份證ID',
    trigger: 'blur'
    },{
      pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份證格式不正確' 
    }
  ],
  carId:[
    {required: true, message: '請輸入車牌號', trigger: 'blur'}, 
    {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[掛學(xué)警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警軍港澳]{1}$)/,
     message: '常規(guī)格式：晉B12345'},
  ],
},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前題目：vueelementuiform表單驗證的實現(xiàn)
鏈接URL：http://muchs.cn/article14/iepsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計、商城網(wǎng)站、網(wǎng)站設(shè)計公司、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容