view ui 表单验证

参考文档

不是教程！

不是教程！

不是教程！

学习时查资料大概记了一些，边验证边修改，还有目前只验证了几个用到的，以下内容可能会有错误，但大方向应该是没问题的，修改中……！
在view ui中，使用标单验证总的有以下四个步骤

1、绑定:rules： :rules=“ruleValidate”

2、传递数据： prop=“name”

3、验证规则：

字段：{
[ type:‘名称’，message:‘验证不通过时提示信息’，trigger:‘触发类型blur’]
}

{ required: true, type: 'string', message: 'Please select time', trigger: 'blur' }
 { type: 'email', message: 'Incorrect email format', trigger: 'blur' }

type: 'string’可以省略，如下，其他的数据类型必须指明，否则验证不通过

ruleValidate: {
     name: [
           { required: true, message: 'The name cannot be empty', trigger: 'change' }
           ]
     }

4、调用验证

在调用验证方法前，先注册以下ref

• 注册ref，相当于jQuery中设置一个id名称是一个意思，调用时用于获取对象

<Form ref="formValidate"

• 调用验证
  name改成你注册的ref的值，如上面的是formValidate；

  this.$refs[name].validate((valid) => {
      if (valid) {
          this.$Message.success('Success!');
      } else {
          this.$Message.error('Fail!');
      }
  })

例子

<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="mail">
            <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="City" prop="city">
            <Select v-model="formValidate.city" placeholder="Select your city">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
            </Select>
        </FormItem>
        <FormItem label="Date">
            <Row>
                <Col span="11">
                    <FormItem prop="date1">
                        <DatePicker type="date" placeholder="Select date" v-model="formValidate.date1"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                    <FormItem prop="time">
                        <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="Gender" prop="gender">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="male">Male</Radio>
                <Radio label="female">Female</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="Hobby" prop="interest">
            <CheckboxGroup v-model="formValidate.interest">
                <Checkbox label="Eat"></Checkbox>
                <Checkbox label="Sleep"></Checkbox>
                <Checkbox label="Run"></Checkbox>
                <Checkbox label="Movie"></Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="Desc" prop="desc">
            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'change' }
                    ],
                    mail: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: 'Please select the city', trigger: '  ' }
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    date1: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'blur' }
                    ],
                    time: [
                        { required: true, type: 'string', message: 'Please select time', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>

数据类型type

要使用的验证程序的类型，识别的类型值如下：

• string: 必须是 String 类型。这是默认类型。

 { required: true, type: 'string', message: 'Please select time', trigger: 'blur' }
 { required: true, message: 'The name cannot be empty', trigger: 'change' }

• number: 必须是 Number 类型。
• boolean: 必须是 Boolean 类型。
• method: 必须是 Function 类型。
• regexp: 必须是 RegExp 的实例或在创建新 RegExp 时不生成异常的字符串。
• integer: 必须是 Number 和整数类型。
• float: 必须是 Number 和浮点数类型。
• array: 必须是由array.isarray确定的数组。

{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }

• object: 必须是 Object 类型，而不是Array.IsArray类型。
• enum: 值必须存在于枚举中。
• date: 必须是 Date 类型。

 { required: true, type: 'date', message: 'Please select the date', trigger: 'blur' }

• url: 必须是url类型。
• hex: 必须是十六进制类型。
• email: 必须是电子邮件类型。

{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }

验证规则

• Required：boolean,是否必填

 { required: true, message: 'The name cannot be empty', trigger: 'change' }

• Pattern:模式规则属性表示正则表达式,该值必须匹配才能通过验证。
• Range:使用min和max属性定义范围。对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max。
• Length:验证字段的确切长度。对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，即，它可能仅严格等于len。如果len属性与最小和最大范围属性组合，则len优先。

{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }

• Enumerable:枚举，要从可能值列表中验证值，请使用带有枚举属性的枚举类型，列出该字段的有效值。

var descriptor = {
 role: { type: "enum", enum: ['admin', 'user', 'guest'] }
}

• Whitespace:空白，通常将仅包含空格的必填字段视为错误。要为仅包含空格的字符串添加其他测试，请将空白属性添加到值为true的规则。规则必须是字符串类型。
• Deep Rules:如果需要验证深层对象属性，则可以通过将嵌套规则分配给规则的fields属性来为对象或数组类型的验证规则执行此操作。

// 深度规则
var descriptor = {
 address: {
 type: "object", required: true,
 fields: {
 street: {type: "string", required: true},
 city: {type: "string", required: true},
 zip: {type: "string", required: true, len: 8, message: "invalid zip"}
 }
 },
 name: {type: "string", required: true}
}
var validator = new schema(descriptor);
validator.validate({ address: {} }, (errors, fields) => {
  // errors for address.street, address.city, address.zip
});
注意：如果您没有在父规则上指定必需的属性，那么对于不在源对象上声明的字段是完全有效的，并且不会执行深度验证规则，因为没有要验证的内容。

深度规则验证为嵌套规则创建架构，因此还可以指定传递给schema.validate（）方法的选项。

var descriptor = {
 address: {
 type: "object", required: true, options: {single: true, first: true},
 fields: {
 street: {type: "string", required: true},
 city: {type: "string", required: true},
 zip: {type: "string", required: true, len: 8, message: "invalid zip"}
 }
 },
 name: {type: "string", required: true}
}
var validator = new schema(descriptor);
validator.validate({ address: {} }).catch(({ errors, fields }) => {
// now only errors for street and name    
});

父规则也会被验证，因此如果您有一组规则，例如：

var descriptor = {
 roles: {
 type: "array", required: true, len: 3,
 fields: {
 0: {type: "string", required: true},
 1: {type: "string", required: true},
 2: {type: "string", required: true}
 }
 }
}

并提供 {roles: [“admin”, “user”]} 这样的源对象，将会创建两个错误。一个用于数组长度不匹配，另一个用于索引2处缺少的必需数组项。

var descriptor = {
 urls: {
 type: "array", required: true,
 defaultField: {type: "url"}
 }
}

• Transform:有时需要在验证之前转换值，可能是为了强制价值或以某种方式对其进行消毒。为此，请将验证规则添加到转换有时需要在验证之前转换一个值，可能是强制值或以某种方式对其进行清理。为此，请向验证规则添加转换函数。该属性在验证之前被转换，并重新分配给源对象，以在适当的位置改变该属性的值。

var schema = require('async-validator');
var sanitize = require('validator').sanitize;
var descriptor = {
 name: {
  type: "string",
 required: true, pattern: /^[a-z]+$/,
 transform(value) {
 return sanitize(value).trim();
 }
 }
}
var validator = new schema(descriptor);
var  source = {name: " user "};
validator.validate(source).then(() => assert.equal(source.name, "user"));

如果没有转换函数，验证将失败，因为模式不匹配，因为输入包含前导空格和尾随空格，但通过添加转换函数验证传递，同时清理字段值。

• Messages:消息，根据您的应用程序要求，您可能需要i18n支持，或者您可能更喜欢不同的验证错误消息。实现这一点的最简单方法是将消息分配给规则：

{name:{type: "string", required: true, message: "Name is required"}}

消息可以是任何类型，例如jsx格式。

{name:{type: "string", required: true, message: <b>Name is required</b>}}

消息也可以是一个函数，例如，如果使用vue-i18n：

{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}

对于不同的语言，可能需要相同的模式验证规则，在这种情况下，为每种语言复制模式规则是没有意义的。在这个场景中，您只需为该语言提供您自己的消息并将其分配给模式：

var schema = require('async-validator');
var cn = {
 required: '%s 必填',
};
var descriptor = {name:{type: "string", required: true}};
var validator = new schema(descriptor);
// deep merge with defaultMessages
validator.messages(cn);
// ...

如果要定义自己的验证函数，最好将消息字符串分配给消息对象，然后通过验证函数内的options.messages属性访问消息。

• asyncValidator：异步验证器，您可以为指定字段自定义异步验证函数：function(rule, value, callback)

const fields = {
 asyncField:{
 asyncValidator(rule,value,callback){
 ajax({
 url:'xx',
  value:value
 }).then(function(data){
 callback();
 },function(error){
 callback(new Error(error))
 });
 }
 },
 promiseField:{
 asyncValidator(rule, value){
 return ajax({
 url:'xx',
  value:value
 });
 }
 }
};

validator:验证器，您可以为指定字段自定义验证函数：function(rule, value, callback)

const fields = {
 field:{
 validator(rule,value,callback){
 return value === 'test';
 },
 message: 'Value is not equal to "test".',
 },
 field2:{
 validator(rule,value,callback){
  return  new Error(`'${value} is not equal to "test".'`);
 },
 },
 arrField:{
 validator(rule, value){
 return [
 new Error('Message 1'),
 new Error('Message 2'),
 ];
 }
 },
};