Vue-Rules表单验证组件的相关使用:

最新推荐文章于 2023-07-24 15:14:06 发布

共院第一深情

最新推荐文章于 2023-07-24 15:14:06 发布

阅读量221

点赞数 1

分类专栏： Vue框架代码分享文章标签： vue.js javascript

本文链接：https://blog.csdn.net/name_xy/article/details/131004676

版权

Vue框架代码分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue-Rules表单验证组件的相关使用:

基本用法（[ ] 内容为测试内容，可以按照自己代码修改）:

<el-form :model="[form]" :rules="[rules]" ref="[form]">
  <el-form-item label="[评分]" prop="[score(需要验证的数值)]">
     <el-input v-model="[form.score(输入框输入的数值,需要被验证)]"></el-input>
     <!-- 表单验证的测试事件 -->
     <el-buttpn @click="test">测试按钮</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
  name:"Test",
  data(){
    return{
      form:{},
       rules:{
         score:[     [(该验证规则为:必填,输入为整数的1至5)]
            { pattern:/^[1-5]\d*$/,required: true,message:"请输入1~5",trigger:'blur'},
        ]
      }
    }
  },
  methods:{
    test(){
      this.$refs['form'].validate((valid) =>{
        if (valid) { //表单检验合法
          [(事件内容)]
              }
    })
  }
}
</script>