iview 的表单验证

iview官方文档: https://www.iviewui.com/components/form

html

	<i-Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                        <!-- 上下 -->
                        <div style="display: flex;margin-top: 24px;">
                            <Form-Item prop="up">
                                <i-Input type="text" v-model="formInline.up" placeholder="向上度数"  number>
                                    <Icon type="md-arrow-round-up" slot="prepend"></Icon>
                                </i-Input>
                            </Form-Item>
                            <Form-Item prop="down">
                                <i-Input type="text" v-model="formInline.down" placeholder="向下度数" number>
                                    <Icon type="md-arrow-round-down" slot="prepend" />
                                </i-Input>
                            </Form-Item>
                        </div>
                        <!-- 左右 -->
                        <div style="display: flex;">
                            <Form-Item prop="left">
                                <i-Input type="text" v-model="formInline.left" placeholder="向左度数" number>
                                    <Icon type="md-arrow-round-back" slot="prepend"></Icon>
                                </i-Input>
                            </Form-Item>
                            <Form-Item prop="right">
                                <i-Input type="text" v-model="formInline.right" placeholder="向右度数" number>
                                    <Icon type="md-arrow-round-forward" slot="prepend" />
                                </i-Input>
                            </Form-Item>
                        </div>
                        <div class="a">
                            <Form-Item>
                                <i-Button type="primary" @click="handleSubmit('formInline')">确认</i-Button>
                            </Form-Item>
                        </div>
                    </i-Form>

js（因为使用chrome30所以没有箭头函数）

data: function () {
                function validateAge(rule, value, callback){
                if (isNaN(value)) {
                    callback(new Error('请输入正确的角度!'));
                }else if(value==''){
                    callback();
                }
                // 模拟异步验证效果
                setTimeout(function(){
                    // if (!Number.isInteger(value)) {
                    //     callback(new Error('Please enter a numeric value'));
                    // } else {
                        if (value<0) {
                            callback(new Error('请输入正确的角度'));
                        } else if (value>360) {
                            callback(new Error('请输入正确的角度'));
                        }else if (value>0&&value<360){
                            callback();
                        }
                    // }
                }, 1000);
            };
                return {
                    contentHeight: document.body.clientHeight,
                    contentWidth: document.body.clientWidth,
                    formInline: {
                        up: '',
                        down: '',
                        left: '',
                        right: ''
                    },
                    ruleInline: {
                        up: [
                        	//验证是否为空
                            // { required: true, message: '请输入调整的度数', trigger: 'blur' },
                            { type: 'number', validator: validateAge, trigger: 'blur' }
                        ],
                        down: [
                        	{ type: 'number', validator: validateAge, trigger: 'blur' }
                        ], 
                        left: [
                        	{ type: 'number', validator: validateAge, trigger: 'blur' }
                        ], 
                        right: [
                        	{ type: 'number', validator: validateAge, trigger: 'blur' }
                        ]
                    }
                };
            },

type类型

string: 必须是字符串类型。这是默认类型
number: 必须是数字
boolean: 必须是布尔型的
method:必须是类型函数
regexp: 必须是ReGEXP的实例，或者是在创建新的ReGEXP时不会生成异常的字符串
integer:必须是整数.
float:必须是浮点数.
array: 必须是由Array.isArray确定的数组
object: 必须是类型对象而不是Array.isArray
enum: 枚举中必须存在值。
date: 按日期确定的值必须有效
url: 必须是URL类型。
hex: 必须是十六进制。
email:必须是电子邮件类型。

别的参数

required:true | false
pattern :正则表达式
min: 最小值
max: 最大值
Length : 长度
enum: 验证字段是否存在其中
messages: 错误信息
trigger : ‘change’ | ‘blur’
whitespace : true | false
true:空白字符 ->错误提醒
false: 空白字符->不报错

菜鸟技术，勿喷，有不对的地方。谢谢大家