告诉你们个秘密，现在Vue火热到不行！特别是那个叫R值的绝活儿，真的牛逼，网上查资料、用数据库都不在话下！接下来咱们就来聊聊怎样玩转这个 Vue神器——R值。咱们重点要学会怎么在模板里和方法上用好R值的实力，还要想办法让它变成我们的小伙伴！
在 Vue 模板中使用正则表达式
用Vue玩转正则可真容易比如说，怎么检查用户输入对不对？就像确认下邮箱地址是不是正确那样。别担心，听我说嘛：
html <span v-if="!isValidEmail">请输入正确的邮箱地址</span>
export default { data() { return { email: '', }; }, computed: { isValidEmail() { const emailRegex = /^([a-zA-Z0-9]+[_-]?)*[a-zA-Z0-9]+@[a-zA-Z0-9]+(.[a-zA-Z0-9]+)+$/; return emailRegex.test(this.email); }, errorMessage() { return '请输入有效的邮箱地址'; }, }, };{{errorMessage}}
这段代码是不是看着很简单？看到没，v-model这个东西就是连接input和data里email的桥梁。再看看isValidEmail这个东东，它就像个保镖一样，负责查看输入的邮箱是否准确无误。所以记住一定要填对邮箱地址，只需要用正则表达式查查就能提高准确度。
不仅仅可以发邮件验证，还能利用特殊的正则表达式功能搞定电话号码和身份证这种繁琐的信息。只要用对方式，输入的信息就准确又安全啦～
在 Vue 方法中使用正则表达式
Vue模板真挺好用的，尤其是解决那些复杂的逻辑难题，就像这个’filterText’功能是方便我们过滤掉不需要的数字。
“`javascript
methods:{
filterText(text){
直接把数字都擦掉就好。
}
export default { data() { return { text: '', }; }, methods: { filterText(input) { const regex = /d+/g; return input.replace(regex, ''); }, }, };{{filterText(text)}}
}
这段代码是专门用来找数字滴，找到后再用“/d+/g”将这些数字全换成0，这样最后就只剩下字母和其他符号！除了这个“replace”外，其实还有更多强大的函数，比如“split”“test”之类的，相信以后肯定会派上大用途哒~
封装正则表达式工具类
不如咱们动手弄个小助手，专门解决正则表达式的问题，这样使用起来就更轻松了~
下面是一个简单的正则表达式工具类示例：
const REGEXP ={
咱们POP3邮箱就要这样设置：每封邮件开头结尾的位置要添点特别的字符，比如字母或数字。然后正文部分，就只能有字母、数字、破折号和逗号这些东西~
PHONE:/^1[3-9]d{9}$/,
export const REGEXP = {
EMAIL: /^([a-zA-Z0-9]+[_-]?)*[a-zA-Z0-9]+@[a-zA-Z0-9]+(.[a-zA-Z0-9]+)+$/,
PHONE: /^1[3456789]d{9}$/,
IDCARD: /(^d{15}$)|(^d{17}([0-9]|X)$)/,
// ...
};
export function testRegexp(regexp, value) {
if (typeof value !== 'string') {
return false;
}
return regexp.test(value);
}
ID卡得有点儿料哦：至少密码得有15位或者18位，还能包含字母X和x这个东东，记得带上几个位数就对了。还有就是别忘了加点数字和字母X或x
};
只要把想要匹配的字符串扔给test()进行判断就行！
这儿有很多种数据，像是邮箱、电话号还有身份证啥的，还可以用这个叫testRegexp的秘密武器来验证匹配！如果要查验或操控这些数据，只需要轻松点下对应的正则表达式按钮就行！记得多用几次这个神奇的工具哟~
总结与展望
import { REGEXP, testRegexp } from './regexp';
const phone = '18888888888';
const isValid = testRegexp(REGEXP.PHONE, phone);
if (isValid) {
console.log('手机号码合法');
} else {
console.log('手机号码不合法');
}
说真的，用Vue的正则真的超好用！验证用户输入或做数据分析，轻松搞定。想怎么用就怎么用，随时可用。不仅省时省力，还能提高代码质量。前端技术现在可是热得要命，相信Vue的正则以后会发展得更好，功能更多呀～
评论0