HTML5 表单验证

2019-09-07 郑州网站建设  

表单验证 显示验证----可自己设置验证通过 和 不通过的 提示信息

HTML5 表单验证

<script>

/*

显示验证----可自己设置验证通过 和 不通过的 提示信息

checkValidity办法用于检验输入信息与规则是否匹配,匹配则返回TRUE 不匹配则返回FALSE

*/

function checkName(){

var name=document.getElementById("user");

var result=document.getElementById("result");

if(name.value=='')

{

result.innerText="请输入姓名";

alert("输入姓名");

return;

}

var flag=name.checkValidity();

if(flag){

result.innerText="格式正确";

}else

result.innerText="格式不正确";

}

</script>

<form>

<fieldset>

<legend>

name

</legend>

<input type="text" id="user" pattern="^[a-zA-Z0-9]{5,}$" onblur="checkName()" > <!--onblur 事件会在对象失去焦点时发生 -->

<span id="result"></span>

<br>

<input type="password">

<br>

<input type="submit" value="submit">

</fieldset>

</form>

自动验证

<!-- 表单自动验证属性:required pattern 数字验证 min max step -->

<form>

<fieldset>

<legend>

num

</legend>

<label>数字:</label><input type="number" min="0" max="100">

<label>步长:3</label>

<input type="number" step="3">

<input type="submit" value="submit">

</fieldset>

</form>

取消验证

novalidate属性 可取消表单全部元素的验证

<!-- novalidate属性 可取消表单全部元素的验证 -->

<form novalidate="true">

<input type="邮箱">


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1176.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • 表单
  • 显示
  • 验证
  • ----
  • 自己