<body> <form> <!-- required属性在提交表单时不能空着 这个属性适用于<input> <textarea> <select> --> <input type='text' name='username' required> <!-- email和url是两个得到支持的最多的类型 email只允许输入符合电子邮件的格式 url只允许输入的文本支持浏览器的格式 --> <input type='email' name='email'> <input type='url' name='homepage'> <!-- number类型,只允许输入数字,但是也可以输入不符的类型,但是提交的时候会 提示错误,min是数的最小值,max最大值,step进位 --> <input type='number' min='0' max='100' step='5' name='count' > <!-- pattern 正则格式,允许表单输入的格式 --> <input type='text' pattern="d+" name='number' > <!-- submit提交 --> <input type='submit' value='提交' name='sub'> </form> <script> //检测表单字段是否是必填的 var isUsernameRequired = document.forms[0].elements['username'].required; console.log( isUsernameRequired );//true //检测是否支持required var isRequriedSupported = 'required' in document.createElement('input'); console.log( isRequriedSupported );// var count = document.forms[0].elements['count']; var sub = document.forms[0].elements['sub']; for (var i in document.forms[0]) { console.log(i+' : '+document.forms[0][i]) } sub.onclick = function(){ //表单验证,只要有一个表单无效,就返回false if (document.forms[0].checkValidity()) { alert('表单有效'); }else{ alert('表单无效'); } } </script> </body>
5、检测有效性
customError:如果设置了setCustomValidity(),则为true,否则返回false。
6、禁用验证
通过设置novalidate属性
<form method='post' action='signup.php' novalidate>
<!--这里插入表单元素-->
</form>
如果一个表单中有多个提交按钮,为了制定点击某个提交按钮不必验证表单,可以在相应的按钮上添加formnovalidate
<form> <!--这里插入表单元素--> <input type='submit' value='Regular Submit'> <!-- formnovalidate指定某个提交按钮不必验证表单 --> <input type='submit' formnovalidate name='btnNoValidate' value='Non-validating Submit'> </form>