介绍JavaScript正则实现表达式以字母开头


本文摘自PHP中文网,作者coldplay.xixi,侵删。

免费学习推荐:javascript视频教程

表单校验:创建表单,使用JavaScript+dom为表单添加校验.

要求:

  • 验证用户名称,必须以字母开头,长度2-6位之间.
  • 验证密码不能为空.
  • 确认密码不能为空,要与密码一致.
    在这里插入图片描述
    在这里插入图片描述

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

<!DOCTYPE html><html lang="en"><!-- 表单校验:创建表单,使用JavaScript为表单添加校验.

    1.验证用户名称,必须以字母开头,长度2-6位之间.

    2.验证密码不能为空.

    3.确认密码不能为空,要与密码一致. --><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function checkForm() {

            //获得用户名对象

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

            //---获得用户名输入框中的value值

            var usernamevalue = username.value;

            var Reg = /^[a-zA-Z][-_a-zA-Z0-9]{1,5}/;//JavaScript中的正则与Java的正则略有不同

            if (usernamevalue.length >= 2 && usernamevalue.length <= 6 && Reg.test(usernamevalue)) {

                //为span设置提示语

                document.getElementById("usernameSpan").innerHTML = "<font color='green'> 用户名可用<font>";

            } else {

                document.getElementById("usernameSpan").innerHTML = "<font color='red'> 用户名必须以字母开头且长度在2-6之间<font>";

            }

 

            //获得密码value

            var password = document.getElementById("password").value;

            if (password == "") {

                document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空</font>";

            } else {

                document.getElementById("passwordSpan").innerHTML = "<font color='green'>密码可用</font>";

            }

 

            //获得确认密码

            var repassword = document.getElementById("repassword").value;

 

            if (repassword == password) {

                document.getElementById("repasswordSpan").innerHTML = "<font color='green'>输入一致</font>";

            } else {

                document.getElementById("repasswordSpan").innerHTML = "<font color='red'>两次输入密码不一致</font>";

            }

        }

    </script></head><body>

    <h2>新用户注册</h2>

    <p style="border: 1px solid sandybrown; width: 300px; height: 260px;">

        <form action="">

            <table cellspacing="15">

                <tr>

                    <td>

                        用户名称:

                    </td>

                    <td>

                        <input type="text" id="username">

                        <span id="usernameSpan"></span>

                    </td>

 

                </tr>

 

                <tr>

                    <td>

                        密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp码:

                    </td>

                    <td>

                        <input type="password" id="password">

                        <span id="passwordSpan"></span>

                    </td>

 

                </tr>

 

                <tr>

                    <td>

                        确认密码:

                    </td>

                    <td>

                        <input type="password" id="repassword">

                        <span id="repasswordSpan"></span>

                    </td>

                </tr>

            </table>

        </form>

    </p>

    <input type="button" value="确认注册" onclick="checkForm()" /></body></html>

相关免费学习推荐:javascript(视频)

以上就是介绍JavaScript正则实现表达式以字母开头的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

react是javascript

小总结 javascript 开发中常见错误解决

javascript var是什么

javascript函数前面加!、+、-、~, ;符号的意义介绍

javascript怎样修改div内容

javascript canvas方法有哪些

详解javascript中的service workers!

javascript和java有什么区别

javascript如何转化json字符串

js动态添加带圆圈序号列表方法的精讲

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...