请选择 进入手机版 | 继续访问电脑版
查看: 368|回复: 0

[JavaScript] AngularJS实现注册表单验证功能的方法

[复制链接]

911

主题

911

帖子

2783

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2783
发表于 2017-11-27 19:19:03 | 显示全部楼层 |阅读模式
本文为大家分享了案例: 注册表单验证,供大家参考,具体内容如下
需要使用的两张图片:
dui.gif:cuo.gif:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="jquery.1.12.4.js"></script>
  <!--jquery样式-->
  <script type="text/javascript">
    //email验证
    $(function(){
      //input标签获取焦点/失去焦点时调用方法
      $(":input[name='email']").blur(function(){
        //获取input的内容
        var email = $(this).val();
        //给定输入内容的模板(email格式模板)
        var reg = /\w+[@]{1}\w+[.]\w+/;
        //将input的内容放入到模板中,进行判断
        if(reg.test(email)){
          //格式正确:输出“用户名可用”
          $(":input[name='check-email']").val("用户名可用");
          //声明正确时调用的图片
          image1 = "dui.gif";
          //将图片放入到img标签中
          $("#img1").attr("src", image1);
        }else{
          //格式错误:输出“请填写有效的Email地址”
          $(":input[name='check-email']").val("请填写有效的Email地址");
          //声明正确时调用的图片
          image1 = "cuo.gif";
          //将图片放入到img标签中
          $("#img1").attr("src", image1);
        }
      });
    });
    //name验证
    $(function(){
      $(":input[name='name']").blur(function(){
        var name = $(this).val();
        //判断输入内容是大于四个字符
        if(name.length > 4){
          $(":input[name='check-name']").val("输入正确");
          image2 = "dui.gif";
          $("#img2").attr("src", image2);
        }else{
          $(":input[name='check-name']").val("输入信息错误");
          image2 = "cuo.gif";
          $("#img2").attr("src", image2);
        }
      });
    });
    //password验证-第一次
    $(function(){
      $(":input[name='password-one']").blur(function(){
        var name = $(this).val();
        //判断密码是否大于6个字符
        if(name.length > 6){
          $(":input[name='check-password-one']").val("密码可用");
          image3 = "dui.gif";
          $("#img3").attr("src", image3);
        }else{
          $(":input[name='check-password-one']").val("密码不可用");
          image3 = "cuo.gif";
          $("#img3").attr("src", image3);
        }
      });
    });
    //password验证-第二次
    $(function(){
      $(":input[name='password-two']").blur(function(){
        var name1 = $(":input[name='password-one']").val();
        var name2 = $(this).val();
        //首先判断密码是否大于6个字符
        if(name2.length > 6){
          //然后判断两次密码是否一致
          if(name2 == name1){
            $(":input[name='check-password-two']").val("密码可用");
            image4 = "dui.gif";
            $("#img4").attr("src", image4);
          }else{
            $(":input[name='check-password-two']").val("密码不可用");
            image4 = "cuo.gif";
            $("#img4").attr("src", image4);
          }
        }else{
          $(":input[name='check-password-two']").val("密码不可用");
          image4 = "cuo.gif";
          $("#img4").attr("src", image4);
        }
      });
    });
  </script>
  <!--css样式-->
  <style type="text/css">
    img{width: 15px; height: 15px}
    .left{width: 200px; text-align: right}
    .right{width: 400px}
    .bjs{background-color: limegreen}
    .btn{margin: 20px 0 0 300px}
  </style>
</head>
<body>
<h4 style="color: red">以下均为必填项</h4>
<form>
  //table表格样式:边框为1,内部填充为10,外部填充为0
  <table border="1" cellpadding="10" cellspacing="0">
    <tr>
      <td class="left">请输入您的Email地址:</td>
      <td class="right">
        <input class="bjs" name="email">
        <img id="img1" src="cuo.gif" />
        <input type="text" name="check-email" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">设置您在当当网的昵称:</td>
      <td class="right">
        <input class="bjs" name="name">
        <img id="img2" src="cuo.gif" />
        <input type="text" name="check-name" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">设置密码:</td>
      <td class="right">
        <input class="bjs" name="password-one">
        <img id="img3" src="cuo.gif" />
        <input type="text" name="check-password-one" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">再次输入您设置的密码:</td>
      <td class="right">
        <input class="bjs" name="password-two">
        <img id="img4" src="cuo.gif" />
        <input type="text" name="check-password-two" style="border: 0px" />
      </td>
    </tr>
  </table>
  <input class="btn" type="button" value="注册" />
</form>
</body>
</html>





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入COS论坛

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入COS论坛

本版积分规则

COS系统论坛(cosxitong.cn)COS操作系统是由上海联彤与中科院软件研究所在北京时间2014年1月15日在北京联合发布具有自主知识产权的操作系统COS(China Operating System,意为中国操作系统),该操作系统可应用于个人电脑、智能掌上终端、机顶盒、智能家电等领域。
友链QQ:673672871
© 2014 COS操作系统论坛 Powered by Discuz!X 3.2  Template by COS系统论坛 
快速回复 返回顶部 返回列表