vue+element之表单验证

        首页介绍一下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绑定的简写，每次都给我干掉了，然后找半天的错。。。。真的是脑壳疼

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