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{
			       		
		　　　　}	  
		　　});
		}

　　

转载于:https://www.cnblogs.com/potholing/p/9244149.html