vue、iview、VeeValidate 表單驗證完整

1.main.js

（1）.安裝vee-validate

1. npm install vee-validate --save

（2）.安裝vue-i18n

1. npm install vue-i18n --save

//驗證引入  
import VeeValidate, { Validator } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';
import messages from './libs/dist/locale/zh_CN.js';
Validator.addLocale(zh_CN);
Validator.updateDictionary({
    zh_CN: {
        messages
    }
});

　　

2.html
<div class="layui-tab-item layui-show">  
                        <div class="layui-form-item">
                            <label class="layui-form-label">項目名稱<em class="x">*</em></label>
                            <div class="layui-input-block">
                                <input type="text" name="project" autocomplete="off" class="layui-input" v-validate="'required|project|max:50'" placeholder="請輸入項目名稱">
                                <span class="errortip" v-show="errors.has('form-1.project')">{{ errors.first('form-1.project')}}</span>
                            </div>
                        </div>   
                        <div class="layui-form-item">
                            <label class="layui-form-label">對方帳號<em class="x">*</em></label>
                            <div class="layui-input-block">
                                <input type="text" value="" name="other_phone" autocomplete="off" class="layui-input cyl_required" v-validate="'required|other_phone'" placeholder="請輸入對方帳號">
                                <span class="errortip" v-show="errors.has('form-1.other_phone')">{{ errors.first('form-1.other_phone')}}</span>
                            </div>
                        </div>
                        <input type="hidden" name="other_id" value="123456000" />
                        <div class="layui-form-item">
                            <label class="layui-form-label">對方公司*</label>
                            <div class="layui-input-block">
                                <input placeholder="請輸入對方公司" type="text" name="other_company_name" autocomplete="off" class="layui-input">
                                <span class="errortip" v-show="errors.has('form-1.other_company_name')">{{ errors.first('form-1.other_company_name')}}</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">對方聯繫人姓名<em class="x">*</em></label>
                            <div class="layui-input-block">
                                <input  value="" placeholder="請輸入對方聯繫人姓名" type="text" name="other_name" autocomplete="off" class="layui-input" v-validate="'required|other_name|max:50'">
                                <span class="errortip" v-show="errors.has('form-1.other_name')">{{ errors.first('form-1.other_name')}}</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">金額<em class="x">*</em></label>
                            <div class="layui-input-block">
                                <input value="" placeholder="請輸入金額" type="text" name="money" autocomplete="off" class="layui-input" v-validate="'required|money|max:13'">
                                <span class="errortip" v-show="errors.has('form-1.money')">{{ errors.first('form-1.money')}}</span>
                            </div>
                        </div>  
                    </div>

3.js
created() {   
			// 自定義validate 
　　　　　　　　　　　　　　//設置require提示的name值改成入文字
			const dictionary = {
			   zh_CN: {
			      messages: {
			        required: ( field )=> field + "不能爲空"
			      },
			      attributes:{
			        project:'項目名稱',
			        other_phone:'對方帳號',
			        other_name: '對方聯繫人姓名',
			        money: '金額',
			        order_type:'訂單屬性'
			      }
			  }
			};
			Validator.updateDictionary(dictionary);

			Validator.extend('phone', {
				messages: {
					zh_CN: field => field + '必須是11位手機號碼',
				},
				validate: value => {
					return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
				}
			});
			Validator.extend('project', {
				messages: {
					 zh_CN:field => field + '輸入格式不正確',
				},
				validate: (value) => {
					return value.length;
				}
			}),
			Validator.extend('other_phone', {
				messages: {
					 zh_CN:field => field + '手機號格式不正確',
				},
				validate: (value) => {
					return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
				}
			});
			Validator.extend('other_name', {
				messages: {
					 zh_CN:field => field + '輸入格式不正確',
				},
				validate: (value) => {
					return value.length;
				}
			});
			Validator.extend('money', {
				messages: {
					 zh_CN:field => field + '輸入金額格式不正確',
				},
				validate: (value) => {
					//value.length >= 13 &&
					return /^[0-9]+(.[0-9]{2})?$/.test(value)
				}
			});    
		},

　　

		validateForm(scope) {  
		　　this.$validator.validateAll(scope).then((result) => {  
		　　　　if (result) {
						
		　　　　} else{
			       		
		　　　　}	  
		　　});
		}