HTML +JavaScript 正则表达式来验证信息

最新推荐文章于 2021-05-31 17:48:07 发布

頻率LinC

最新推荐文章于 2021-05-31 17:48:07 发布

阅读量873

点赞数

分类专栏：使用教程

本文链接：https://blog.csdn.net/ZuoLvLC/article/details/26379095

版权

使用教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需要的正则表达式如下：

①验证数字

^[0-9]*$

②验证日期格式 yyyy-mm-dd

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29))$

③验证整数3-6位，小数1位的数（包括正负）

(-)?\d{3,6}(\.\d{1,1})?$

④验证小数位为1位的数

(-)?\d{1,9}(\.\d{1,1})?$

使用方法：

value是需要验证的数据

if(!/(-)?\d{1,9}(\.\d{1,1})?$/.test(value)){
       fun();//不符合执行什么方法
}

下面是HTML代码，用JavaScript验证雇员信息并将提示信息直接显示在输入框旁：

<HTML>
<HEAD>
<TITLE>Employee Resgister Page</TITLE>
<script language="JavaScript">	
function validate(form){

if(form.employeeID.value == "")
{document.getElementById("regId").innerText="提示：不能为空！";
}else if(!/^[0-9]*$/.test(form.employeeID.value)){
document.getElementById("regId").innerText="提示：只能是数字！";
}else{
document.getElementById("regId").innerText="";
}
 if(form.employeeName.value ==""){
document.getElementById("regName").innerText="提示：不能为空！";
}else{
document.getElementById("regName").innerText="";
}

 if(form.employeeJob.value =="")
{
document.getElementById("regJob").innerText="提示：不能为空！";

}else{
document.getElementById("regJob").innerText="";
}

 if(form.employeeDate.value == "")
{document.getElementById("regDate").innerText="提示：不能为空！";

}else if(!/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29))$/.test(form.employeeDate.value)){
document.getElementById("regDate").innerText="提示：日期格式不正确！请遵循(yyyy-mm-dd）";
}
else{
document.getElementById("regDate").innerText="";
}
if(form.basePay.value == "")
{document.getElementById("regBasePay").innerText="提示：不能为空！";
}else if(!/(-)?\d{3,6}(\.\d{1,1})?$/.test(form.basePay.value)){
document.getElementById("regBasePay").innerText="提示：不符合要求！请遵循（100.0-999999.9）";
}else{
document.getElementById("regBasePay").innerText="";
}

if(form.bonus.value == "")
{document.getElementById("regBonus").innerText="提示：不能为空！";
}else if(!/(-)?\d{1,9}(\.\d{1,1})?$/.test(form.bonus.value)){
document.getElementById("regBonus").innerText="提示：不符合要求！请遵循（X.X）";
}else{
document.getElementById("regBonus").innerText="";
}

if(document.getElementById("regBonus").innerText == "" && document.getElementById("regBasePay").innerText == "" &&document.getElementById("regDate").innerText == "" &&document.getElementById("regJob").innerText==""&&document.getElementById("regName").innerText == ""&&document.getElementById("regId").innerText ==""){
return true;
}
return false;

}
</script>

</head>
<body>
<form  action = "" method = "post" name="EmployeeRegisterForm" onChange = "validate(this)" onSubmit = "return validate(this)">

雇员编号：<input type = "text" name ="employeeID"><label for ="employeeID" id="regId"></label></br>
雇员姓名：<input type = "text" name ="employeeName"><label for ="employeeName" id="regName"></label></br>
雇员工作：<input type = "text" name ="employeeJob"><label for ="employeeJob" id="regJob"></label></br>
雇员日期：<input type = "text" name ="employeeDate"><label for ="employeeDate" id="regDate"></label></br>
基本工资：<input type = "text" name ="basePay"><label for ="basePay" id="regBasePay"></label></br>
个人奖金：<input type = "text" name ="bonus"><label for ="bonus" id="regBonus"></label></br>
<input type="submit" value="提交" ">

</form>



</body>
<HTML>