vue 当中的表单验证

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

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