html5表单验证
之前一直不知道怎么自定义提示信息，今天看到了资料就记录一下，也把经常要用到的html5表单验证记录一下。
- setCustomValidity() html5内置的js方法，自定义提示信息
- oninvalid 提交的input元素的值为无效值时，触发oninvalid事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5表单验证测试</title>
</head>
<body>
<div>
<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')" oninput="setCustomValidity('')"></label></p>
<p>密码：<label><input type="password" name="" required="required" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="请输入密码" oninvalid="setCustomValidity('6~20字母数字或下划线')" oninput="setCustomValidity('')"></label></p>
<p>身份证号：<label><input type="text" name="" required="required" pattern="^([0-9]){18}(x|X)?$" placeholder="请输入身份证号" oninvalid="setCustomValidity('请输入正确的身份证号码')" maxlength="18" oninput="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位手机号码')" oninput="setCustomValidity('')"></label></p>
<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>
<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>
</html> 常用的html5验证
type="text"
type="radio"
type="checkbox"
type="email"
type="number"
type="tel"
type="url"
type="zipcode" //邮编
type="date"
type="hour"
type="password"
type="email | tel" //支持多type共存，可以让文本框输入邮箱或号码
step (数字间隔)、min 、 max、 required、pattern、multiple(可选择多个值)、placeholder
<input type="number" pattern="^\d+" /> //可以输入文字常用的正则表达式
pattern=" [\u4e00-\u9fa5]" //只匹配中文
pattern="/^\d{6,}$/" // 密码必须是6位数字以上
pattern="/^[a-zA-Z_]\w{5,}$/" // 6位字母组成不能数字开头
<form action="/" novalidate></form> //novalidate表示禁用html5自带的表单验证功能
一个学习连接：http://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/
點(diǎn)擊查看更多內(nèi)容
5人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦