Vue 表单校验规则与实例：IP、手机、固话

"Vue.js是前端开发中广泛使用的JavaScript框架，尤其在构建用户界面时，其强大的表单处理和数据绑定功能受到了众多开发者青睐。在Vue项目中，表单验证是确保用户输入数据准确性和安全性的关键环节。本文将介绍在Vue中常用的`rules`校验规则，并提供实例代码供参考。 1. IP地址校验 在Vue中，我们可以通过自定义验证函数来检查输入的值是否符合合法的IP地址格式。以下是一个简单的IP地址校验函数`validateIP`： ```javascript export function validateIP(rule, value, callback) { if (value === '' || value === undefined || value === null) { callback(); } else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; if ((!reg.test(value)) && value !== '') { callback(new Error('请输入正确的IP地址')); } else { callback(); } } } ``` 这个函数首先检查输入值是否为空，然后使用正则表达式`reg`匹配IP地址的格式，如果不匹配且输入不为空，将返回一个错误提示。 2. 手机号码或固话校验 对于手机号码或固定电话的验证，可以使用`validatePhoneTwo`函数： ```javascript export function validatePhoneTwo(rule, value, callback) { const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/; if (value === '' || value === undefined || value === null) { callback(); } else { if ((!reg.test(value)) && value !== '') { callback(new Error('请输入正确的电话号码或者固话号码')); } else { callback(); } } } ``` 此函数允许输入格式为0xx-xxxxxxx（固话）或13/14/15/17/18开头的11位数字（手机号码）。 3. 固话校验 如果仅需检查固定电话格式，可以使用`validateTelphone`函数： ```javascript export function validateTelphone(rule, value, callback) { const reg = /0\d{2,3}-\d{7,8}/; if (value === '' || value === undefined || value === null) { callback(); } else { if ((!reg.test(value)) && value !== '') { callback(new Error('请输入正确的固定电话')); } else { callback(); } } } ``` 这个函数只针对0开头的固话格式进行验证。 4. 手机号码校验 只校验手机号码，可以使用`validatePhone`函数： ```javascript // 省略具体实现，原理同validatePhoneTwo，只匹配13/14/15/17/18开头的11位数字 ``` 在Vue的表单中，这些校验规则通常会与`v-model`和`v-bind:rules`指令结合使用，例如： ```html <form> <el-input v-model="ipAddress" :rules="[{ required: true, validator: validateIP, trigger: 'blur' }]"></el-input> <el-input v-model="phoneNumber" :rules="[{ required: true, validator: validatePhoneTwo, trigger: 'blur' }]"></el-input> <!-- 其他表单元素 --> </form> ``` 这样，当用户在输入框失去焦点（触发`blur`事件）时，相应的校验函数会被调用，如果输入不符合规则，会显示错误提示。 以上就是在Vue中常用的一些`rules`校验规则，开发者可以根据实际需求进行组合或扩展，以适应各种复杂的验证场景。在实际项目中，建议将这些校验规则封装成单独的模块，方便在多个组件之间复用，提高代码的可维护性和一致性。"