html5表单pattern属性配合正则验证手机号码,身份证

pattern="[1]+[3456789]+\d{9}"

html5表单自带的表单验证规则身份证，手机号

html5表单验证
之前一直不知道怎么自定义提示信息，今天看到了资料就记录一下，也把经常要用到的html5表单验证记录一下。

• setCustomValidity() html5内置的js方法，自定义提示信息
• oninvalid 提交的input元素的值为无效值时，触发oninvalid事件、

<form>
<!-- 第一种方式 定义了一个validatelt函数-->
<!-- <p>姓名：<label><input type="text" name="" required="required" pattern="[\u4e00-
\u9fa5]{2,4}" placeholder="请输入姓名" oninvalid="validatelt(this,'真实姓名必须是中文，且长度不小于2
，不大于4')"></label></p>

<p>手机号码：<label><input type="tel" name="" required="required" maxlength="11"
pattern="^(0|86|17951)?1[0-9]{10}" placeholder="请输入手机号" oninvalid="validatelt(this,'请输入11位
手机号码')" ></label></p> -->

<!-- 第二种调用html5自带的验证 -->

<p>姓名：<label><input type="text" name="" required="required" pattern="[\u4e00-\u9fa5]
{2,4}" placeholder="请输入姓名" oninvalid="setCustomValidity('真实姓名必须是中文，且长度不小于2，不大
于4')" οninput="setCustomValidity('')"></label></p>

<p>密码：<label><input type="password" name="" required="required" pattern="^[a-zA-Z0-
9]\w{5,19}$" placeholder="请输入密码" oninvalid="setCustomValidity('6~20字母数字或下划线')"
οninput="setCustomValidity('')"></label></p>

<p>身份证号：<label><input type="text" name="" required="required"pattern="^[1-9]\d{5}[1
-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$" placeholder="请输入
身份证号" oninvalid="setCustomValidity('请输入正确的身份证号码')" maxlength="18"
οninput="setCustomValidity('')"></label></p>

<p>手机号码：<label><input type="tel" name="" required="required" maxlength="11"
pattern="^(0|86|17951)?1[0-9]{10}" placeholder="请输入手机号" oninvalid="setCustomValidity('请输入11
位手机号码')" οninput="setCustomValidity('')"></label></p>

<input type="text" class="mui-input" required name="tel"  maxlength="11" pattern="[1]+[3456789]+\d{9}" placeholder="请输入手机号" oninvalid="setCustomValidity('请输入11位手机号码')" οninput="setCustomValidity('')">

注：这里设置了oninvalid 和oninput容易出错，如果第一次输入错误之后就会一直提示错误，哪怕输入是正确的

<p>邮箱：<label><input type="email" name="" required="required" placeholder="请输入邮箱"
></label></p>

<p>时间：<label><input type="date" name="" required="required" pattern="" placeholder="
请输入时间" ></label></p>

<p>网址：<label><input type="url" name="" required="required" pattern="/^(https?:\/\/)?
([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" placeholder="请输入网址" ></label></p>
身份证：&nbsp;&nbsp; 身份证：&nbsp;&nbsp; <input type="text" name="sfz" required value=""
pattern="^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$"
style="width:250px; height:40px; margin-top:10px;border:1px solid orangered;background-
color:#FFFFFF" /> </tr>
<input type="submit" name="提交">
</form>
</div>

</footer>
</body>
<script>
// 第一种方式 对悬浮窗的设置
function validatelt(inputelement,err){
if(inputelement.validity.patternMismatch){
inputelement.setCustomValidity(err);

}else{
inputelement.setCustomValidity("");
return true;
}
}
</script>

常用的正则表达式

pattern=" [\u4e00-\u9fa5]" //只匹配中文
pattern="/^\d{6,}$/" // 密码必须是6位数字以上
pattern="/^[a-zA-Z_]\w{5,}$/" // 6位字母组成不能数字开头

只能输入中文：

<input type="text" onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')">  

只能输入英文:

<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">  

文本框只能输入数字代码(小数点也不能输入):

<input onkeyup="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')">

只能输入数字,能输小数点:

方法一：<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
方法二：<input name=txt1 onchange="if(/\D/.test(value)){alert('只能输入数字');value='';}">
方法三：<input onkeyup="value=value.replace(/[^\d.]/g,'')" onafterpaste="value=value.replace(/[^\d.]/g,'')" >

只能输入数字和英文:

<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

只能输入字母和中文:

<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" 
 maxlength=10 name="Numbers">

只能输入字母和数字:

<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">