首页 > 其他 > 详细

vue 当中的表单验证

时间:2021-04-07 21:07:14      阅读:28      评论:0      收藏:0      [点我收藏+]

安排的任务中需要对表单的元素进行验证,用的正则判断

  1. IP地址
    正则表达式/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/

  2. 端口号
    正则表达式/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/

在对应的item中绑定rules、

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
data(){
  return{
    // 表单校验
      rules: {
        dsname: [
          { required: true, message: "数据源名称不能为空", trigger: "blur" }
        ],
        dstype: [
          { required: true, message: "数据源类型:1-mysql,2-oracle,3-mqtt不能为空", trigger: "change" }
        ],
        dsip: [
          { required: true, message: "数据源ip地址不能为空", trigger: "blur" },
          { pattern: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/, message: ‘请输入正确的ip地址‘, trigger: [‘blur‘, ‘change‘]}
        ],
        dsport: [
          { required: true, message: "数据源端口不能为空", trigger: "blur" },
          { pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, message: ‘请输入正确的端口‘, trigger: [‘blur‘, ‘change‘]}
        ],
        dname: [
          { required: true, message: "数据库名或主题不能为空", trigger: "blur" },
          { pattern: /^[a-z][a-z0-9_]*$/ , message: ‘数据库名以小写英文字母开头,且只能包含英文字母、数字、下划线‘, trigger: [‘blur‘, ‘change‘]}
        ],
        dsuser: [
          { required: true, message: "数据源用户名不能为空", trigger: "blur" },
          { pattern: /^[a-z]*$/ , message: ‘数据库名以小写英文字母开头,且只能包含英文字母‘, trigger: [‘blur‘, ‘change‘]}
        ],
        dspassword: [
          { required: true, message: "数据源密码不能为空", trigger: "blur" },
          { pattern: /^(\w){6,16}$/ , message: ‘密码长度6-16位‘, trigger: [‘blur‘, ‘change‘]}
        ]
      }
  }
}

vue 当中的表单验证

原文:https://www.cnblogs.com/javaupup/p/14628069.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!