JavaScript 运用之表单验证(正则)和控制输入长度。


<!--H5表单验证:-->
<!--1、-->
<form>

<input class="phone" type="text" placeholder="请输入手机号码" required="required" pattern="^[1][0-9]{10}$" oninvalid="setCustomValidity('手机号格式不正确')"/>
 <input id='user_name' type='text' placeholder="请输入手机号码" name='user_name' required/> <input type='submit'/> </form> 
<!--2、-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则</title>
</head>
<body>
<form action="#">
<input class="phone" type="text" placeholder="请输入电话号码!"/>
<input class="phone" type="text" placeholder="请输入手机号码" required="required" pattern="^[1][0-9]{10}$" oninvalid="setCustomValidity('手机号格式不正确')"/>
<input type="submit"/>
</form>
<script type="text/javascript" src="./bootstrap/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.js"></script>
<script>
$(
".phone").blur(function(){ var reg = /^[1][34578][0-9]{9}$/; var val = $(this).val(); if(!reg.test(val)){ alert("手机号格式错误!"); }; });
</script>
</body>
</html>
<!--3、-->
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>江哥讨厌IE</title>
</head>
<body>
<input type="text" id="btn_getNum"/>
<input type="button" value="得到数字" onclick="checkMobile(btn_getNum.value);"/>
<script language="javascript" type="text/javascript"> function checkMobile(str) { if(str==""){ alert("手机号不能为空!"); } else{ var re = /^1\d{10}$/ if (re.test(str)) { alert("正确"); } else { alert("手机号格式错误!"); } } }
</script>
</body>
</html>
<!--4、jQuery实时计算用户输入字数
-->
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery统计文字个数</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="../lib/jquery-1.11.1.js"></script>
</head>
<body>
<ul>
<li>
<span>新闻标题:</span>
<span>
<input id="news_title" name="news_title" type="text" size="60" onkeyup="title_len();" onclick="title_len();" maxlength="80"/>
</span>
<span id="titlelen">0/80</span>
</li>
</ul>
</body>
<script language="javascript" type="text/javascript">
function title_len () { var value = $("#news_title").val().length; if(value==80){ var string="<span style='color: #ff0000'>"+value+"/80</span>" }else { var string="<span style='color: #ff0000'>"+value+"</span>/80" }; $("#titlelen").html(string); };
</script>
</html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM