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）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

JS-表单验证二的更多相关文章

  1. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  2. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  3. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  4. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  5. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  6. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  7. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  8. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  9. js表单验证工具包

    常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...

  10. 一个漂亮的js表单验证页面+验证码

    一个漂亮的js表单验证页面 见图知其意, 主要特性 带密码安全系数的判断 其他的就没有啥啦 嘿嘿嘿 当然,其代码也在Github上 我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代 ...

随机推荐

  1. java类 2.18

    1. 静态方法中可以直接调用同类中的静态成员,但不能直接调用非静态成员.如: 如果希望在静态方法中调用非静态变量,可以通过创建类的对象,然后通过对象来访问非静态变量.如: 2. 在普通成员方法中,则可 ...

  2. OpenCV HOGDescriptor 参数图解

    防止以后再次掉入坑中,决定还是在写写吧 OpenCV中的HOG特征提取功能使用了HOGDescriptor这个类来进行封装,其中也有现成的行人检测的接口.然而,无论是OpenCV官方说明文档还是各个中 ...

  3. centos7安装google-chrome和chromedriver

    1.root用户下进入到etc/yum.repos.d目录下  [root@f7d6b9f2-1291-4d2f-8805-aef94deac9f7 yum.repos.d]# pwd  /etc/y ...

  4. 在excel表格里，为所有数字添上绿色小三角

    在excel表格里,为所有数字添上绿色小三角的方法有4种: 1. 为一个单元格添加:直接在单元格里添加一个英文的逗号 2. 为一列数据添加:选中要添加绿色小三角的列,选择 数据-->分列--&g ...

  5. 指令——touch

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 指令:touch    作用:创建文件 语法: ...

  6. 使用pip install jupyter报错处理办法及修改Jupyter默认加载路径的方法

    1.配置python环境之后想使用Jupyter,网上查看可以使用pip install Jupyter安装,执行命令行后正常安装,安装到一半以后报错,如图1.2 图1 图2 2.发现是安装过程中安装 ...

  7. 概率图模型之EM算法

    一.EM算法概述 EM算法(Expectation Maximization Algorithm,期望极大算法)是一种迭代算法,用于求解含有隐变量的概率模型参数的极大似然估计(MLE)或极大后验概率估 ...

  8. NOIP2016天天爱跑步解题思路

    算法:LCA,树上差分+(乱搞) 如果有写错的地方请大佬更正 对于100%数据: u表示起点,v表示终点 对于一条u到v的路径,先讨论LCA!=u&&LCA!=v的情况: 分为u到LC ...

  9. 75.Python中ORM聚合函数详解：Sum

    Sum:某个字段的总和. 1. 求图书的销售总额,示例代码如下: from django.http import HttpResponse from django.db import connecti ...

  10. ZOJ 3795 Grouping 强连通分量-tarjan

    一开始我还天真的一遍DFS求出最长链以为就可以了 不过发现存在有向环,即强连通分量SCC,有向环里的每个点都是可比的,都要分别给个集合才行,最后应该把这些强连通分量缩成一个点,最后保证图里是 有向无环 ...