lybyzp

vue+element之表单验证

发表于:2019/10/4 18:27

        首页介绍一下element,这个是饿了吗团队推出的一个基于vue的前端框架,其他的请自行百度

以前吃过表单验证的亏,在刚学习jQuery的时候是第一次碰到表单验证,然而当初觉得太复杂,各种参数烦的一比,就没有用心去听,也没有仔细研究过,这算是一个坎,后来接触element又碰到表单验证。。。这比当初要清晰多了(假装没碰到坑)。

        上代码:

<div id="app">
  <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="普通文本框">
        <el-input v-model="ruleForm.text"></el-input>
      </el-form-item>
      <el-form-item label="密码类">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数字类">
        <el-input v-model="ruleForm.number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
  </el-form>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:function(){
            return{
                ruleForm:[]
            }
        },
        methods:{
              //提交
           submitForm(){
            
            }
        }
        
    })
</script>

        好了,基本样子我们暂时就写好了,先把需求说一下,所有都不能为空,密码长度6到10位且不能含有中文,数字类只能输入数字,需求明确才好做啊

分析一下上面的代码,ruleForm是表单model,下面那个方法我不说都能看懂,验证的时候是在我们鼠标离开该文本区域的时候发生,当有一条不符合规则

的时候就点击就不能提交。model有了,我们还需要什么,当然是验证规则了,这也是我喜欢用element的一点,非常清晰

<div id="app">
    <!--这里多了:rules="rules" ref="ruleForm"-->
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!--prop:验证规则-->
      <el-form-item label="普通文本框" prop="text">
        <el-input v-model="ruleForm.text"></el-input>
      </el-form-item>
      <el-form-item label="密码类" prop="password">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数字类" prop="number">
        <el-input v-model.number="ruleForm.number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
  </el-form>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:function(){
            return{
                ruleForm:[],
                //验证规则
                rules:[
                        //注意text,在上面会有用
                        //required=>代表必填
                        //message=>验证不通过时显示的消息
                        text: [{ required: true, message: '***不能为空', trigger: 'blur' }],
                        number:[{ required: true, message: '***不能为空', trigger: 'blur' },
                                { type: 'number', message: '***必须为数字值'} ],
                        password:[ { required: true, message: '请输入活动名称', trigger: 'blur' },
                                   { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }]        
                        ]
            }
        },
        methods:{
              //提交
           submitForm(ruleForm){
                this.$refs[formName].validate((valid) => {          
                    if (valid) {
                         alert('验证通过!');
                     } else {            
                         console.log('验证失败!!'); 
                         return false;
                     }
                });
            }
        }
        
    })
</script>

        ref/rules自行百度,要善用百度

        这样应该就可以了,当然有些时候需要更多的验证规则,我们可以使用自定义规则,文档里面写的有,我说过,文档是个好东西,对了如果使用VS开发的话,好像VS2015及以下是不支持vue的一些写法的,当你Ctrl+K+D的时候你会发现你写的有些的东西没了,编译器会认为那是错误的写法,自动给你的一写东西删掉,没错,这里说的就是它“:”,这个vue绑定的简写,每次都给我干掉了,然后找半天的错。。。。真的是脑壳疼

最后提醒一下,复制代码有风险,需谨慎(因为我并没有在编译器中写,我是直接写的,所以,你懂的)








关于TNBLOG
TNBLOG,技术分享
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢