一、在线验证
在线正则验证是一种非常方便的工具，可以帮助我们快速验证正则表达式是否符合我们的预期。一些常用的在线正则验证网站包括：
- Regex101：https://regex101.com/
- RegExr：https://regexr.com/
- Regexr：https://regexr.com/
这些网站都提供了类似的功能，可以输入正则表达式并进行验证。在验证结果中，我们可以看到匹配的文本和匹配到的位置，非常方便。
二、input正则验证
在表单验证中，我们经常需要对用户输入的内容进行正则表达式验证。在input元素中，我们可以使用pattern属性来指定我们所需要的正则表达式。
<input type="text" name="username" pattern="[a-zA-Z0-9_-]{3,16}" required>
上面的代码中，我们指定了一个正则表达式，用来验证用户名。这个正则表达式限定了用户名只能包含字母、数字、下划线和短横线，并且长度在3到16个字符之间。如果用户输入的内容不符合这个正则表达式，就会在提交表单时出现提示信息。
三、正则在线验证
除了使用input的pattern属性进行正则表达式验证之外，我们还可以使用JavaScript来进行验证。在JavaScript中，我们可以使用RegExp对象来创建正则表达式，并使用test()方法来判断一个字符串是否匹配正则表达式。
const regExp = /[a-zA-Z0-9_-]{3,16}/;
const username = 'john_doe';
if (regExp.test(username)) {
console.log('用户名格式正确');
} else {
console.log('用户名格式错误');
}
上面的代码中，我们使用RegExp对象创建了一个正则表达式，用来验证用户名的格式。然后使用test()方法对用户名进行验证。如果用户名符合正则表达式，就会输出“用户名格式正确”，否则输出“用户名格式错误”。
四、正则验证邮箱
验证邮箱的正则表达式需要考虑到一些复杂情况。比如，邮箱中可能包含大小写字母、数字、点号、“+”号、“-”号、“_”号等字符。以下是一个简单的正则表达式，可以用来验证大多数邮箱地址：
const regExp = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
const email = 'john_doe@gmail.com';
if (regExp.test(email)) {
console.log('邮箱格式正确');
} else {
console.log('邮箱格式错误');
}
上面的代码中，我们使用正则表达式验证了一个邮箱地址。如果邮箱符合正则表达式，就会输出“邮箱格式正确”，否则输出“邮箱格式错误”。
五、js正则验证手机号
验证手机号的正则表达式也比较复杂。以下是一个简单的正则表达式，可以用来验证中国大陆的手机号：
const regExp = /^1[3-9]\d{9}$/;
const phoneNumber = '13812345678';
if (regExp.test(phoneNumber)) {
console.log('手机号格式正确');
} else {
console.log('手机号格式错误');
}
上面的代码中，我们使用正则表达式验证了一个手机号。如果手机号符合正则表达式，就会输出“手机号格式正确”，否则输出“手机号格式错误”。
六、vue正则验证
在Vue项目中，我们可以使用vuelidate库来进行表单验证。vuelidate库使用了validators对象来实现各种验证规则，包括正则表达式验证。
import { required, email, minLength } from 'vuelidate/lib/validators'
export default {
data () {
return {
email: '',
password: ''
}
},
validations: {
email: { required, email },
password: { required, minLength: minLength(6) }
}
}
上面的代码中，我们使用了vuelidate库对表单进行了验证。在validations对象中，我们指定了两个验证规则，用来验证邮箱和密码。其中，email规则使用了email验证器来进行邮箱格式验证。
七、elementui正则验证
在ElementUI库中，也包含了一些正则表达式验证规则，可以用来对表单进行验证。
邮箱
export default {
data () {
return {
email: ''
}
},
methods: {
handleSubmit () {
console.log('邮箱：', this.email)
}
},
validations: {
email: {required, email}
}
}
上面的代码中，我们使用了ElementUI的el-input和el-form-item组件来创建一个带有标签的输入框。然后在validations对象中指定了email规则，用来验证输入框中的内容是否是一个合法的邮箱地址。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/232059.html
微信扫一扫 
支付宝扫一扫 