iview表单验证（代码简短多次验证）

最新推荐文章于 2023-11-17 15:23:33 发布

沫熙瑾年

最新推荐文章于 2023-11-17 15:23:33 发布

阅读量933

点赞数

分类专栏： iview

本文链接：https://blog.csdn.net/xy19950125/article/details/84033131

版权

iview 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<template>
    <div>
        <div class="navigation">
            <p>
                <span>渠道设置&nbsp;>&nbsp;添加渠道</span>
            </p>
        </div>
        <div class="clearfix contentcss">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120" style="width:400px">
                <FormItem label="业务类型 :" prop="businesstype">
                    <Select v-model="formValidate.businesstype" placeholder="请选择">
                        <Option value="beijing">New York</Option>
                    </Select>
                </FormItem>
                <FormItem label="渠道名称 :" prop="channelName">
                    <Input v-model="formValidate.channelName" placeholder="请输入渠道名称"></Input>
                </FormItem>
                <FormItem label="渠道使用人 :" prop="channeluser">
                    <Input v-model="formValidate.channeluser" placeholder="请输入渠道使用人"></Input>
                </FormItem>
                <FormItem label="渠道使用人电话 :" prop="channeluserphone">
                    <Input v-model="formValidate.channeluserphone" placeholder="请输入渠道使用人电话"></Input>
                </FormItem>
                <FormItem label="选择推广样式 :" prop="extension">
                    <Select v-model="formValidate.extension" placeholder="请选择">
                        <Option value="beijing">New York</Option>
                    </Select>
                </FormItem>
                
                <FormItem label="状态 :">
                    <!-- <i-switch v-model="switch1" @on-change="changel" /> -->
                    
                    <i-switch size="large" v-model="switch1" @on-change="changel">
                        <span slot="open">启用</span>
                        <span slot="close">关闭</span>
                    </i-switch>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')" style="width:120px">保存</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px;width:120px">取消</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                switch1:true,
                formValidate:{
                    businesstype:"",
                    channelName:"",
                    channeluser:"",
                    channeluserphone:"",
                    extension:""
                },
                ruleValidate:{
                    businesstype:[
                        {required: true, message: '请选择业务类型', trigger: 'change'}
                    ],
                    channelName:[
                        {required: true, message: '请输入渠道名称', trigger: 'change'},
                        {required: true, message: '渠道名称最多50字符', pattern: /^[\u4e00-\u9fa5]{1,50}$/,trigger: 'change'}
                    ],
                    channeluser:[
                        {required: true, message: '请输入渠道使用人', trigger: 'change'},
                        {required: true, message: '渠道使用人最多50字符', pattern: /^[\u4e00-\u9fa5]{1,50}$/,trigger: 'change'}
                    ],
                    channeluserphone:[
                        {required: true, message: '请输入渠道使用人电话', trigger: 'change'},
                        { required: true, message: '请输入正确格式的电话', pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, trigger: 'blur' }
                    ],
                    extension:[
                        {required: true, message: '请选择推广样式', trigger: 'change'}
                    ]

                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('保存成功');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            changel(status){
               
            }
        },
        created(){
            if(this.$route.query.is=="a"){
                
            }
        }
    
    }
</script>
<style>

</style>