Vue校验规则：实例代码解析

"Vue中常用rules校验规则的实例代码，包括IP地址、手机号码或固话的验证方法。" 在Vue.js框架中，表单验证是开发过程中的重要环节，用于确保用户输入的数据符合预期格式和标准。`rules`属性在Vue的`v-model`指令中与`v-bind`结合使用，可以实现对表单数据的实时验证。以下是一些常见的Vue `rules`校验规则的实例代码： 1. 合法IP地址验证 ```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(); } } } ``` 这个函数通过正则表达式检查输入值是否为合法的IPv4地址。如果输入为空或不符合IP地址格式，它将返回一个错误提示。 2. 手机号码或固话验证 ```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(); } } } ``` 这个函数可以验证输入值是否为中国的手机号码（13, 14, 15, 17, 18开头的11位数字）或固话号码（以0开头，后面跟着2-3位区号，再接7-8位电话号码）。如果输入无效，它会返回一个错误消息。 3. 固话验证 ```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开头，后面跟着2-3位区号，再接7-8位电话号码）。如果输入不匹配，它同样会触发错误回调。 在实际项目中，这些验证方法可以通过Vue的`prop`绑定到表单组件的`v-model`上，并结合`v-bind:rules`来应用验证规则。例如： ```html <template> <form @submit.prevent="submitForm"> <input type="text" v-model="ipAddress" :rules="['required', 'validateIP']" /> <input type="text" v-model="phoneNumber" :rules="['required', 'validatePhoneTwo']" /> <input type="text" v-model="telephone" :rules="['required', 'validateTelphone']" /> <button type="submit">提交</button> </form> </template> <script> import { validateIP, validatePhoneTwo, validateTelphone } from './validation'; export default { data() { return { ipAddress: '', phoneNumber: '', telephone: '', }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过后的操作 } else { console.log('表单验证失败'); } }); }, }, computed: { rules() { return { validateIP: validateIP, validatePhoneTwo: validatePhoneTwo, validateTelphone: validateTelphone, }; }, }, }; </script> ``` 在这个例子中，当用户尝试提交表单时，每个字段都会根据相应的验证规则进行检查。如果所有字段都通过验证，`submitForm`方法将被调用，否则会显示错误消息。这种方式使得表单验证变得灵活且易于维护。 在实际开发中，你可以根据需求扩展这些验证规则，比如添加邮箱验证、身份证号验证等，或者使用现成的库如Vuelidate或vee-validate来简化和增强表单验证功能。记住，验证规则的目的是确保数据质量，提供良好的用户体验，并防止非法或无效的数据进入系统。