JS-表单验证二

3.范围验证：年龄范围验证：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <style type="text/css">

    </style>
</head>

<body>
    <form action="aa.html" method="post">     <!--<form> 中的两个必要属性：action,method-->
        年龄：<input type="text" name="nl" id="nl" />
        <input type="submit" value="登陆" id="b1" onclick= "return yz()" />  <!--onclick属性添加点击事件-->

    </form>
</body>
    <script type="text/javascript">
        function yz()                        //封装一个<body>中做成点击事件的函数
        {
            var nl = document.getElementById("nl").value;   //通过id名 找到 元素并重新 赋值

            if(nl<18)                //判断条件
            {
                alert("你太年轻了！")
                return false;

            }
            else if(nl>60)        //判断条件
            {
                alert("您已经老了，可以去跳广场舞了！");
                return false;
            }
            else
            {
                return true;       //满足条件时将执行表单的action
            }
        }

    </script>

不满足条件的提示如下：

     

4.正则验证：邮箱验证：

下面的代码检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

</head>

<body>
    <form action="aa.html" method="post">
         邮箱：<input type="text" name="yx" id="yx" />
        <input type="submit" value="登陆" id="b1" onclick= "return yz()" />  

    </form>
</body>
    <script type="text/javascript">
        function yz()                        //封装一个<body>中做成点击事件的函数
        {
            var yx = document.getElementById("yx").value;   //通过id名 找到 元素并重新 赋值
            var gf = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮箱的正则验证，记不住找百度
            if(yx=="" || null)
            {
                alert("邮箱不能为空！");
                return false;
            }
            else if(yx.match(gf)==null)           //不是很明白这个函数的意思
            {
                alert("您输入的邮箱地址不符合规范，请核对后再输入！");
                return false;
            }
            else
            {
                return true;       //满足条件时将执行表单的action
            }
        }

    </script>
</html>

输入不当时输出的提示为：

附：1.JavaScript match() 方法

定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，它返回指定的值，而不是字符串的位置。

例如：

<script type="text/javascript">

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))

</script>

输出：

1,2,3

2.正则表达式：
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个
串中取出符合某个条件的子串等

构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。

正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。