首頁 > web前端 > js教程 > AngularJS註冊表單驗證的步奏詳解

AngularJS註冊表單驗證的步奏詳解

php中世界最好的语言
發布: 2018-04-17 14:12:50
原創
1606 人瀏覽過

這次為大家帶來AngularJS註冊表單驗證的步奏詳解,AngularJS註冊表單驗證的注意事項有哪些,下面就是實戰案例,一起來看一下。

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 = "";

          //将图片放入到img标签中

          $("#img1").attr("src", image1);

        }else{

          //格式错误:输出“请填写有效的Email地址”

          $(":input[name='check-email']").val("请填写有效的Email地址");

          //声明正确时调用的图片

          image1 = "";

          //将图片放入到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 = "";

          $("#img2").attr("src", image2);

        }else{

          $(":input[name='check-name']").val("输入信息错误");

          image2 = "";

          $("#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 = "";

          $("#img3").attr("src", image3);

        }else{

          $(":input[name='check-password-one']").val("密码不可用");

          image3 = "";

          $("#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 = "";

            $("#img4").attr("src", image4);

          }else{

            $(":input[name='check-password-two']").val("密码不可用");

            image4 = "";

            $("#img4").attr("src", image4);

          }

        }else{

          $(":input[name='check-password-two']").val("密码不可用");

          image4 = "";

          $("#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="" />

        <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="" />

        <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="" />

        <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="" />

        <input type="text" name="check-password-two" style="border: 0px" />

      </td>

    </tr>

  </table>

  <input class="btn" type="button" value="注册" />

</form>

</body>

</html>

登入後複製

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:



#

以上是AngularJS註冊表單驗證的步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板