JavaScript表单验证实验过程中验证手机号码、密码、昵称的部分内容
<script type="text/javascript">
function CheckForm() {
var phoneip=CheckPhone();
var passwordid=CheckPassword();
var nameid=CheckName();
var validateid=CheckValidate();
return phoneip&passwordid&nameid&validateid;
}
//验证手机号
function CheckPhone(){
var Phone=document.getElementById('phone');
var PhoneErr=document.getElementById('phoneAlert');
var pattern=/^1[34578]\d{9}$/; //验证手机号正确形式
if(!pattern.test(Phone.value)){
PhoneErr.style.visibility="visible";
return false;
}
else {
PhoneErr.style.visibility="hidden";
}
if(Phone.value==""){
PhoneErr.style.visibility="visible";
return false;
}
else{
PhoneErr.style.visibility="hidden";
}
}
//验证密码
function CheckPassword() {
var Passwd=document.getElementById('password');
var PasswdErr=document.getElementById('passAlert');
var pattern=/^\w{6,}$/;//最少6位
if (!pattern.test(Passwd.value)){
PasswdErr.style.visibility="visible";
return false;
}
else{
PasswdErr.style.visibility="hidden";
}
if(Passwd.value=""){
PasswdErr.style.visibility="visible";
return false;
}
else{
PasswdErr.style.visibility="hidden";
}
}
//判断昵称
function CheckName() {
var namedate=["Tom","Jack","Carson","Nadal","Federer","Djokovic","Murray"];//已有的昵称
var Name=document.getElementById('nickname');
var NameErr=document.getElementById('nickAlert');
for(let i=0;i<namedate.length;i++) {
if (Name.value == namedate[i]) {
NameErr.style.visibility = "visible";
return false;
} else {
NameErr.style.visibility = "hidden";
}
}
if(Name.value==""){
NameErr.style.visibility="visible";
return false;
}
else{
NameErr.style.visibility="hidden";
}
}
//验证码
function CheckValidate() {
var Vali=document.getElementById('validate');
var ValiErr=document.getElementById('validateAlert');
if(Vali.value==""){
ValiErr.style.visibility="visible";
return false;
}
else{
ValiErr.style.visibility="hidden";
}
}
</script>
下面是转化一位博主的一些 Pattern的用法常用的格式,方便查看。
原文链接:https://blog.youkuaiyun.com/qq_36927265/article/details/87864026
1 匹配首尾空格的正则表达式:(^\s*)|(\s*$)
2 整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$
3 只能输入数字:"^[0-9]*$"。
4 只能输入n位的数字:"^\d{n}$"。
5 只能输入至少n位的数字:"^\d{n,}$"。
6 只能输入m~n位的数字:。"^\d{m,n}$"
7 只能输入零和非零开头的数字:"^(0|[1-9][0-9]*)$"。
8 只能输入有两位小数的正实数:"^[0-9]+(.[0-9]{2})?$"。
9 只能输入有1~3位小数的正实数:"^[0-9]+(.[0-9]{1,3})?$"。
10 只能输入非零的正整数:"^\+?[1-9][0-9]*$"。
11 只能输入非零的负整数:"^\-[1-9][]0-9"*$。
12 只能输入长度为3的字符:"^.{3}$"。
13 只能输入由26个英文字母组成的字符串:"^[A-Za-z]+$"。
14 只能输入由26个大写英文字母组成的字符串:"^[A-Z]+$"。
15 只能输入由26个小写英文字母组成的字符串:"^[a-z]+$"。
16 只能输入由数字和26个英文字母组成的字符串:"^[A-Za-z0-9]+$"。
17 只能输入由数字、26个英文字母或者下划线组成的字符串:"^\w+$"。
18 验证用户密码:"^[a-zA-Z]\w{5,17}$"正确格式为:以字母开头,长度在6~18之间,只能包含字符、数字和下划线。
19 验证是否含有^%&',;=?$\"等字符:"[^%&',;=?$\x22]+"。
20 只能输入汉字:"^[\u4e00-\u9fa5]{0,}$"
21 验证Email地址:"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。
22 验证InternetURL:"^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。
23 验证电话号码:"^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为:"XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。
24 验证身份证号(15位或18位数字):"^\d{15}|\d{18}$"。
25 验证一年的12个月:"^(0?[1-9]|1[0-2])$"正确格式为:"01"~"09"和"1"~"12"。
26 验证一个月的31天:"^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为;"01"~"09"和"1"~"31"。
27 匹配中文字符的正则表达式: [\u4e00-\u9fa5]
28 匹配双字节字符(包括汉字在内):[^\x00-\xff]
29 应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
30 String.prototype.len=function(){return this.replace(/[^\x00-\xff]/g,"aa").length;}
31 匹配空行的正则表达式:\n[\s| ]*\r
32 匹配html标签的正则表达式:<(.*)>(.*)<\/(.*)>|<(.*)\/>
原文链接:https://blog.youkuaiyun.com/qq_36927265/article/details/87864026