JavaScript表单验证

 JavaScript 表单验证

 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

 被 JavaScript 验证的这些典型的表单数据有：

  • 用户是否已填写表单中的必填项目？
  • 用户输入的邮件地址是否合法？
  • 用户是否已输入合法的日期？
  • 用户是否在数据域 (numeric field) 中输入了文本？
1.非空验证
<body>
<input type="text" name="yonghuming" id="a" onblur="liKai()"/><span id="tishi"></span><br />
<input type="submit" name="提交" onclick="return tiJiao() "/>
</body>
<script>
function tiJiao(){
	var b=document.getElementById("a")
	if(b.value==""){
		alert("用户名不能为空！")
		return false}
	else{alert("提交成功！")
	 return true}}
	 
function liKai(){
	var c=document.getElementById("a");
	var m=document.getElementById("tishi")
	if(c.value==""){
		m.innerText="用户名不能为空"
		m.style.color="blue"}
		else{m.innerText="用户名填写正确"
		m.style.color="yellow"}}
</script>

　　

2.相等验证

<body>
<input type="text" id="a" />
<input type="text" id="b" onblur="biJiao()"/>
</body>
<script>
function biJiao(){
	var x=document.getElementById("a")
	var y=document.getElementById("b")
	if(x.value==y.value){
		alert("您输入的密码一致！")}
		else{alert("您输入的密码不一致！！")}}

</script>

　　

3.范围验证

 

<body>
<input type="text" id="sxk" onblur="yanzheng()" />
<input type="submit" onclick="return yangzheng()"/>
</body>
<script>
function yanzheng(){
	var a=document.getElementById("sxk")
	if(parseInt(a.value)>18&&parseInt(a.value)<70){
		alert("您可以考驾照了！！")
		}
		else{alert("您不符合开车的年龄")
		}}
	
</script>

　　

 

4.正则验证

<body>
<input type="text" id="zz" onblur="zhengZe()" />
</body>
<script>
function zhengZe(){
	var a=document.getElementById("zz")
	if(a.value.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)==null){
	    alert("邮箱格式不正确")}
		else{alert("您输入的格式正确")}}

</script>

　　

定界符：/^正则表达式$/
匹配开头：^
匹配结尾：$
*代表前面的表达式可以出现N次N>=0
+代表前面的表达式至少出现一次
?代表前面的表达式最多出现一次
{n}代表前面的表达式确定出现n次
{n,}代表前面的表达式最少出现n次
{n,m}代表前面的表达式最少出现n次，最多出现m次
x|y 代表匹配x或者y
[abc]代表匹配abc里面的任意一个
[a-z]代表匹配所有的小写字母里面的任意一个
\d 代表任意一个数字
\S 代表任意一个可见字符
\w 代表包括下划线的任意单词字符

常用正则表达式：

Email邮箱地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$  另外一个：  /^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+\.)+[A-Za-z]{2,4}$/

手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$  另外一个：/^1[3|4|5|7|8]\d{9}$/

身份证号：

15或18位身份证：^\d{15}|\d{18}$

15位身份证：^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$

18位身份证：^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$

posted on 2017-06-22 21:24  superficial。  阅读(162)  评论(0)  编辑  收藏  举报

导航