个人在使用时看到网上总结的有很多了,但大多文章表述的都比较抽象,使用时需要自己组合,通常因为懒所以实际在用时习惯直接拿来用,总结的是本人写程序的过程中用的频率比较高的几个实例:
另:这里有一个博主总结的很不错,链接贴上
个人整理的web开发中常用的表单验证的正则表达式JS——Mr_Smile2014 的文章(侵删)
/*验证是否同意协议*/
function checkAgree() {
document.MyForm.subm.disabled = !document.MyForm.isAgree.checked;
}
/* 验证用户名 */
function checkUsername() {
var reg = /^\D\w{4,9}$/ig;/* 不能以数字开头,长度在5-10位 */
var id = "uname";
return commonInfo(reg, id);
}
/* 验证密码 */
function checkPassword() {
var reg = /^\d{6}$/ig;/* 必须是数字,位数为6位 */
var id = "upwd";
return commonInfo(reg, id);
}
/* 验证真实姓名 */
function checkTruename() {
var reg = /^[\u4e00-\u9fa5]{2,4}$/ig;/* 必须是2-4位的汉字 */
var id = "tname";
return commonInfo(reg, id);
}
/*验证出生日期*/
function checkBirth(){
var reg=/^(19\d{2})|((200\d)-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))|((201[0-6])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))$/ig;
var id="birthday";
return commonInfo(reg, id);
}
/*验证身份证*/
function checkBirth(){
var reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
var id="birthday";
return commonInfo(reg, id);
}
/* 验证电子邮箱 */
function checkEmail() {
/* 字母数字下划线[a0_] + (0-N个".a0_") + @ + a0_ + (1-2组由2-3个a0_组成的字符,如com.cn或com) */
var reg = /^(\w)+(\.\w)*@(\w)+(\.\w{2,3}){1,2}$/ig;
var id = "email";
return commonInfo(reg, id);
}
/* 验证手机号 */
function checkPhone() {
var reg = /^1[35789]\d{9}$/ig;/* 这个比较简单,不说了 */
var id = "phone";
return commonInfo(reg, id);
}
/* 提取公共的文本类表单项验证 */
function commonInfo(reg, id) {
var inputText = document.getElementById(id);
var inputValue = inputText.value;
var inputAlt = inputText.alt;
var inputSpan = document.getElementById(id + "Span");
if (inputValue == null || inputValue.length == 0) {
inputSpan.innerHTML = inputAlt + "不能为空!";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
} else {
if (!reg.test(inputValue)) {
inputSpan.innerHTML = inputAlt + "格式有误!";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
} else {
inputSpan.innerHTML = "√";
inputSpan.style.color = "white";
inputSpan.style.background="rgb(50,200,100)";
inputSpan.style.padding="2px 4px";
inputSpan.style.borderRadius="15px";
return true;
}
}
}
其中还有check验证码,获取验证码,提交按钮是否可用的判断,两次密码输入一致的判断,跟在后面,但是跟主题无关了,可以跳过;
附:其余表单功能补充:
/* 获得验证码 */
function getCode() {
var code = parseInt(Math.random() * 9000 + 1000);
var span = document.getElementById("getCode");
span.innerHTML = code;
span.style.fontSize = "18px";
span.style.padding = "3px 6px";
span.style.color = "red";
span.style.textDecoration= "line-through";
span.style.cursor = "pointer";
span.style.border = "1px #000 solid";
}
/* 校验验证码 */
function checkCode() {
var code = document.getElementById("getCode").innerHTML;
var inputCode = document.getElementById("checkcode").value;
var inputSpan = document.getElementById("codeSpan");
if (inputCode == null || inputCode.length == 0) {
inputSpan.innerHTML = "验证码不能为空!";
inputSpan.style.color = "red";
return false;
} else {
if (inputCode != code) {
inputSpan.innerHTML = "验证码输入错误!";
inputSpan.style.color = "red";
return false;
} else {
inputSpan.innerHTML = "OK!";
inputSpan.style.color = "green";
return true;
}
}
}
/* 验证爱好的选择 */
function checkHobby() {
var choice = document.getElementsByName("hobby");/* 注意这里只能通过name值获得,因为id是为唯一的 */
var Hspan = document.getElementById("hobbySpan");
var count = 0;
for (var i = 0; i < choice.length; i++) {
if (choice[i].checked) {
count++;
}
}
if (count >= 2) {
Hspan.innerHTML = "OK!";
Hspan.style.color = "green";
return true;
} else {
Hspan.innerHTML = "至少选择两项!";
Hspan.style.color = "red";
return false;
}
}
/* 验证两次密码是否一致 */
function checkSame() {
var reg = /^\d{6}$/ig;/* 必须是数字,位数为6位 */
var inputText = document.getElementById("confirmPassword");
var inputValue = inputText.value;
var inputAlt = inputText.alt;
var inputSpan = document.getElementById("confirmPasswordSpan");
var first = document.getElementById("eu_password").value;
if (inputValue == null || inputValue.length == 0) {
inputSpan.innerHTML = inputAlt + "不能为空!";
inputSpan.style.color = "red";
return false;
} else {
if (!reg.test(inputValue)) {
inputSpan.innerHTML = inputAlt + "格式有误!";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
} else {
if (first == inputValue) {
inputSpan.innerHTML = "√";
inputSpan.style.color = "white";
inputSpan.style.background="rgb(50,200,100)";
inputSpan.style.padding="2px 4px";
inputSpan.style.borderRadius="15px";
return true;
} else {
inputSpan.innerHTML = "两次密码输入不一致";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
}
}
}
}
/* 验证是否可以提交 */
function checkSubmit() {
return checkCode() && checkUsername() && checkedPassword() && checkSame()
&& checkedTruename() && checkHobby() && checkedEmail()
&& checkedPhone();
}
以下为html代码: