html5 pattern 既要验证格式又要验证长度的解决办法是用正则表达式实现。
1、在html5页面中有如下form：
<form id="myform">
<input type="text" name="fullname" pattern="[A-Za-z0-9\w]{4,20}" required="required" />
<input type="submit" />
</form>
在提交的时候做fullname的校验：要求是字母和数字，长度是4到20位之间。
2、jquery代码如下：
$(document).ready(function () {
$('#myform').validate({debug:true})
})
3、校验在提交的时候生效：
输入zhangsan123就可以正确提交。
输入张三就会报错：
<!DOCTYPE html><html>
<head>
<meta charset=utf-8" />
<title>HTML5新增表单属性</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</head>
<body>
<form action="HTML5Structure.html" id="commentForm">
用户名：<input type="text" name="userName" pattern="[A-z]{5,}" title="只能是五位以上英文字符" required /><br />
密码：<input type="password" name="userPwd" placeholder="请输入密码" title="密码不能为空" required /><br />
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
$(function(){
$("#commentForm").validate()
})
</script>
</body>
</html>
复制以上代码，看看是不是满足你的需求
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）