首页 > 其他 > 详细

表单验证

时间:2018-08-20 21:35:20      阅读:333      评论:0      收藏:0      [点我收藏+]

<!DOCTYPEhtml>

<html>

 <head>

       <meta charset="utf-8">

       <title>文档的标题</title>

       <script>

       function getvalue(){

       varvalue=document.getElementById("range").value;//document所有文本.getElementById获取所有id

        varage=document.getElementById("age");

        age.innerText=value;//innerText赋值文本框

       }

       function checkName(){

       varuserName=document.getElementById("userName");

       varr=document.getElementById("r");

       var flag=userName.checkValidity();//文本的核对是否符合正则表达式(但不会判断不为空的状态)

       if(userName.value.length==0){r.innerText="用户名不能为空"}

       else{

       if(flag)r.innerText="用户名格式正确";

       else r.innerText="用户名格式不正确";

              }

       }

       function checkPSW(){

       varpsw=document.getElementById("psw").value.length;

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

       if(psw<3){r2.innerText="弱";}

       else if(psw>=3 &&psw<6){r2.innerText="中";}

       else {r2.innerText="强";}

       }

       function checkPSWsame(){

       varpsw=document.getElementById("psw").value;

       varpw2=document.getElementById("pw2").value;//文本一致:if判断两个文本的值是否==

       varr3=document.getElementById("r3");

       if(psw==pw2){r3.innerText="密码一致";}

       else{r3.innerText="密码不一致";}

       }

       </script>

</head>

<body>

<formaction="ok.html" method="post" id="myform"novalidate="true"><!--取消表单验证-->

<tableborder="1">

       <tr>

       <td>用户名</td>

       <td><input type="text"autofocus="autofocus" placeholder="请输入用户名" pattern="^[A-z0-9]{4,}$"onblur="checkName()" id="userName">

       <spanid="r"></span>

       <br>

       <!--autofocus自动获取焦点required控制不为空placeholder占用符pattern(一个正则表达式中括号)-->

       <span style="color:red;font-size:12px">必须是英文或数字且用户名不少于4位</span></td>

       </tr>

      

       <tr>

       <td>密码</td>

       <td><inputtype="password" placeholder="请输入密码" onkeyup="checkPSW()"id="psw">

       <spanid="r2"></span></td>

       </tr>

      

       <tr>

       <td>确认密码</td>

       <td><inputtype="password" placeholder="请输入确认密码" onblur="checkPSWsame()" id="pw2">

       <spanid="r3"></span></td>

       </tr>

      

       <tr>

       <td>出生年月日</td>

       <td><inputtype="date"></td>

       </tr>

      

       <tr>

       <td>年龄:</td>

       <td><inputtype="range" max="100" min="0"onchange="getvalue()" id="range">

       <spanid="age"></span></td>

       </tr><!--最大值最小值,改变属性(使用funtion方法),id-->

      

       <tr>

       <td>性别:</td>

       <td><inputtype="radio">男

       <input type="radio">女</td>

       </tr>

      

       <tr>

       <td>收入:</td>

       <td><inputtype="number"></td>

       </tr>

      

       <tr>

       <td>邮箱:</td>

       <td>       <input type="email" placeholder="请输入邮箱"required="required"></td>

       </tr>

      

       <tr>

       <td>个人网站:</td>

       <td>

       <input type="url">

       </td>

       </tr>

      

       <tr>

       <td>城市:</td>

       <td>

              <select>

              <option>北京</option>

              <option>上海</option>

              <optionselected="selected">广州</option>

              <option>合肥</option>

              <option>深圳</option>

              <option>厦门</option>

              <option>桂林</option>

              </select>

       </td>

       </tr>

      

       <tr>

       <td>城市中的地区:</td>

       <td><select>

       <optgroup label="广东省">

              <option>广州</option>

              <option>茂名</option>

              <option>湛江</option>

              <option>深圳</option>

       </optgroup>

       <optgroup label="广西省">

              <option>桂林</option>

              <option></option>

              <option></option>

              <option></option>

       </optgroup>

       <optgroup label="湖南省">

              <option>长沙</option>

              <option></option>

              <option></option>

              <option></option>

       </optgroup>

 

       </select>

       </td>

       </tr>

      

       <tr>

       <td>交友目的:</td>

       <td><selectsize="4">

       <option>校友</option>

       <option>同学</option>

       <option>爱人</option>

       <option>同行</option>

       <option>亲戚</option>

       <option>网友</option>

       <option>其他</option>

       </select>

       </td>

       </tr>

      

       <tr>

       <td>爱好:</td>

       <td><input type="checkbox">美术

       <input type="checkbox">音乐

       <input type="checkbox">篮球

       <input type="checkbox">逛街</td>

       </tr>

      

       <tr>

       <td>照片上传:</td>

       <td><inputtype="file"></td>

       </tr>

      

       <tr>

       <td>自我介绍:</td>

       <td><textarea rows="5"cols="40"></textarea>

       </td>

       </tr>

      

       <tr>

       <td colspan="2"><inputtype="submit" value="提交">

       <input type="reset"value="取消"></td>

       </tr>

      

</table>

      

</form>

</body>

 

 </html>

<!DOCTYPEhtml>

<html>

 <head>

       <meta charset="utf-8">

       <title>文档的标题</title>

       <script>

       function getvalue(){

       varvalue=document.getElementById("range").value;//document所有文本.getElementById获取所有id

        varage=document.getElementById("age");

        age.innerText=value;//innerText赋值文本框

       }

       function checkName(){

       varuserName=document.getElementById("userName");

       varr=document.getElementById("r");

       var flag=userName.checkValidity();//文本的核对是否符合正则表达式(但不会判断不为空的状态)

       if(userName.value.length==0){r.innerText="用户名不能为空"}

       else{

       if(flag)r.innerText="用户名格式正确";

       else r.innerText="用户名格式不正确";

              }

       }

       function checkPSW(){

       varpsw=document.getElementById("psw").value.length;

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

       if(psw<3){r2.innerText="弱";}

       else if(psw>=3 &&psw<6){r2.innerText="中";}

       else {r2.innerText="强";}

       }

       function checkPSWsame(){

       varpsw=document.getElementById("psw").value;

       varpw2=document.getElementById("pw2").value;//文本一致:if判断两个文本的值是否==

       varr3=document.getElementById("r3");

       if(psw==pw2){r3.innerText="密码一致";}

       else{r3.innerText="密码不一致";}

       }

       </script>

</head>

<body>

<formaction="ok.html" method="post" id="myform"novalidate="true"><!--取消表单验证-->

<tableborder="1">

       <tr>

       <td>用户名</td>

       <td><input type="text"autofocus="autofocus" placeholder="请输入用户名" pattern="^[A-z0-9]{4,}$"onblur="checkName()" id="userName">

       <spanid="r"></span>

       <br>

       <!--autofocus自动获取焦点required控制不为空placeholder占用符pattern(一个正则表达式中括号)-->

       <span style="color:red;font-size:12px">必须是英文或数字且用户名不少于4位</span></td>

       </tr>

      

       <tr>

       <td>密码</td>

       <td><inputtype="password" placeholder="请输入密码" onkeyup="checkPSW()"id="psw">

       <spanid="r2"></span></td>

       </tr>

      

       <tr>

       <td>确认密码</td>

       <td><inputtype="password" placeholder="请输入确认密码" onblur="checkPSWsame()" id="pw2">

       <spanid="r3"></span></td>

       </tr>

      

       <tr>

       <td>出生年月日</td>

       <td><inputtype="date"></td>

       </tr>

      

       <tr>

       <td>年龄:</td>

       <td><inputtype="range" max="100" min="0"onchange="getvalue()" id="range">

       <spanid="age"></span></td>

       </tr><!--最大值最小值,改变属性(使用funtion方法),id-->

      

       <tr>

       <td>性别:</td>

       <td><inputtype="radio">男

       <input type="radio">女</td>

       </tr>

      

       <tr>

       <td>收入:</td>

       <td><inputtype="number"></td>

       </tr>

      

       <tr>

       <td>邮箱:</td>

       <td>       <input type="email" placeholder="请输入邮箱"required="required"></td>

       </tr>

      

       <tr>

       <td>个人网站:</td>

       <td>

       <input type="url">

       </td>

       </tr>

      

       <tr>

       <td>城市:</td>

       <td>

              <select>

              <option>北京</option>

              <option>上海</option>

              <optionselected="selected">广州</option>

              <option>合肥</option>

              <option>深圳</option>

              <option>厦门</option>

              <option>桂林</option>

              </select>

       </td>

       </tr>

      

       <tr>

       <td>城市中的地区:</td>

       <td><select>

       <optgroup label="广东省">

              <option>广州</option>

              <option>茂名</option>

              <option>湛江</option>

              <option>深圳</option>

       </optgroup>

       <optgroup label="广西省">

              <option>桂林</option>

              <option></option>

              <option></option>

              <option></option>

       </optgroup>

       <optgroup label="湖南省">

              <option>长沙</option>

              <option></option>

              <option></option>

              <option></option>

       </optgroup>

 

       </select>

       </td>

       </tr>

      

       <tr>

       <td>交友目的:</td>

       <td><selectsize="4">

       <option>校友</option>

       <option>同学</option>

       <option>爱人</option>

       <option>同行</option>

       <option>亲戚</option>

       <option>网友</option>

       <option>其他</option>

       </select>

       </td>

       </tr>

      

       <tr>

       <td>爱好:</td>

       <td><input type="checkbox">美术

       <input type="checkbox">音乐

       <input type="checkbox">篮球

       <input type="checkbox">逛街</td>

       </tr>

      

       <tr>

       <td>照片上传:</td>

       <td><inputtype="file"></td>

       </tr>

      

       <tr>

       <td>自我介绍:</td>

       <td><textarea rows="5"cols="40"></textarea>

       </td>

       </tr>

      

       <tr>

       <td colspan="2"><inputtype="submit" value="提交">

       <input type="reset"value="取消"></td>

       </tr>

      

</table>

      

</form>

</body>

 

 </html>

表单验证

原文:https://www.cnblogs.com/Wuminghu/p/9508001.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!