Jquery 表单验证菜鸟教程_jquery表单验证菜鸟_wyh_File的博客-程序员秘密

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../wrap/jquery.1.12.4.js"></script>
    <title></title>
</head>
<body>
     <div>
         <table>
             <tr>
               <td>用户</td>
               <td><input type="text" id="name" placeholder="用户 3-21个字符"/></td>
               <td><span class="name"></span></td>
             </tr>
             <tr>
               <td>Email地址</td>
               <td><input type="text" id="email" placeholder="email 必须包含@"/></td>
               <td><span class="email"></span></td>
             </tr>
             <tr>
                 <td>手机号</td>
                 <td><input type="text" id="tel" placeholder="不能少于11个字符"/></td>
                 <td><span class="tel"></span></td>
             </tr>
             <tr>
                 <td>证件</td>
                 <td><input type="text" id="zheng" placeholder="不能少于18个字符"/></td>
                 <td><span class="zheng"></span></td>
             </tr>
         </table>
     </div>


     <script type="text/javascript">
         //1
         $("#name").blur(function(){
             var name = $("#name").val();
               if(name.length<3 || name.length>21 || name.length == null){
                   $(".name").text("您输入有误，请重新输入");
                   $(".name").css({
  "color":"red"});
               }else{
                   $(".name").text("下一步");
                   $(".name").css({
  "color":"#4FD92B"});
               }
         });
         //2
         $("#email").blur(function(){
             var email = $("#email").val();
             if(email.indexOf("@")== -1 || email.length == null){
                 $(".email").text("您输入有误，请重新输入");
                 $(".email").css({
  "color":"red"});
             }else{
                 $(".email").text("下一步");
                 $(".email").css({
  "color":"#4FD92B"});
             }
         });
         //3
         $("#tel").blur(function(){
             var tel = $("#tel").val();
             if(tel.length == 11 || tel.length == null){
                 $(".tel").text("下一步");
                 $(".tel").css({
  "color":"#4FD92B"});
             }else{
                 $(".tel").text("您输入有误，请重新输入");
                 $(".tel").css({
  "color":"red"});
             }
         });
         //4
         $("#zheng").blur(function(){
             var zheng = $("#zheng").val();
             if(zheng.length == 18 || zheng.length == null){
                 $(".zheng").text("下一步");
                 $(".zheng").css({
  "color":"#4FD92B"});
             }else{
                 $(".zheng").text("您输入有误，请重新输入");
                 $(".zheng").css({
  "color":"red"});
             }
         });
     </script>
</body>
</html>

本文链接：https://blog.csdn.net/wyh_File/article/details/78478666

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Camera2 Android相机Demo_CSU_ICELEE的博客-程序员秘密

基于Camera2 API的Android相机

支付宝-APP支付_weixin_34056162的博客-程序员秘密

为什么80%的码农都做不了架构师？>>> ...

北航计算机专硕学硕区别,专硕是什么意思啊？和学硕一样吗？_weixin_39531688的博客-程序员秘密

北航在职研究生招生老师为大家介绍专硕和学硕是有区别的。专硕即专业学位(professional degree)，是相对于学术型学位(academic degree)而言的学位类型，其目的是培养具有扎实理论基础，并适应特定行业或职业实际工作需要的应用型高层次专门人才。学硕即学术型学位，以培养教学和科研人才为主，授予学位的类型主要是学术型学位。学术型学位按招生学科门类分为哲学、经济学、法学、教育学、文...

Base64实现加密和解密’html文本‘_html代码富文本 base64 加密_兀行者（做个有情怀的java程序员）的博客-程序员秘密

#BASE64一种较为简单的加密方式，效率较高，不能加密密码，可以加密图片或html文本等。public static void base64(String str) { byte[] bytes = str.getBytes(); //Base64 加密 String encoded = Base64.getEncoder().encodeToString(bytes); System.out.println("Base 64 加密后："

领扣LintCode算法问题答案-322. 象棋游戏_二当家的白帽子的博客-程序员秘密

领扣LintCode算法问题答案-322. 象棋游戏目录322. 象棋游戏鸣谢322. 象棋游戏在棋盘上给定一个长度为N的二元组数组queen，代表N个皇后棋子的坐标给定一个长度为M的二元组数组knight，代表M个骑士棋子的坐标每个皇后可以袭击同行，同列，或者同对角线的任意一个骑士棋子请你返回一个长度为M的答案数组，依次代表每个骑士棋子是否会被攻击到样例 1：输入:[[1,1],[2,2]][[3,3],[1,3],[4,5]]输出:[true.true,false]解释:第.

java 监控 emc 存储_EMC存储配置说明（转）_您身边的武器小店的博客-程序员秘密

EMC存储配置说明一、硬件说明1、名词解释：SP：storage processor磁盘控制器，一般可分为SPA和SPB，是EMC控制的核心部分。每个SP有一个IP地址，方便进行远程管理。SPS：Storage Power Supplies电池，也有两块，主要功能在于停电时还可放电保证cache中的数据顺利写入磁盘。一般充电时间40分钟。LCC：链路控制，连接在磁盘柜与SP之间，是SP控制硬盘的通...