表单验证：
一、非空验证：
1、内容是不是空的。
判断值的长度是不是0。length属性。压缩空格的函数。

2、内容是不是改变了。

二、对比验证：
1、验证两个控件值的关系（相同，大小）

2、验证控件的值与某个固定值的关系。

三、范围验证：

四、格式验证：
正则表达式。regularexpression
function checkEmail()
{
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var txt = document.getElementById("txtEmail").value;
if(txt.match(reg) == null)
{
alert("邮箱格式不正确");
return false;
}
else
{
return true;
}
}
五、其它验证：

案例1 注册验证

要点：

<script language="javascript">

var c=document.getElementById("uid").style.color;

</script>

</head>

<body>

<form>

<table width="600" border="0"cellpadding="0"cellspacing="0">

<tr></tr>

<tr></tr>

<tr></tr>

<tr>

  <td width="20%" align="right" bgcolor="#CCCCCC" >用户名：</td>

  <td width="30%" align="center" bgcolor="#CCCCCC" ><input type="text" style="color:#999" onfocus="dofocus()" onblur="doblur()" value="必填"id="uid">

  </td>

  <td width="50%" >&nbsp;</td>

</tr>

<tr>

  <td width="20%" align="right" bgcolor="#CCCCCC">密码：</td>

  <td width="30%" align="center" bgcolor="#CCCCCC"><input type="text"id="pwd1">

  </td>

  <td width="50%">&nbsp;</td>

</tr>

<tr>

  <td width="20%" align="right" bgcolor="#CCCCCC">确认密码：</td>

  <td width="30%" align="center" bgcolor="#CCCCCC"><input type="text"id="pwd2">

  </td>

  <td width="50%">&nbsp;</td>

</tr>

<tr>

  <td width="20%" align="right" bgcolor="#CCCCCC">邮箱：</td>

  <td width="30%" align="center" bgcolor="#CCCCCC"><input type="text"id="txtEmail">

  </td>

  <td width="50%">&nbsp;</td>

</tr>

<tr>

  <td colspan="2" width="20%" align="center" bgcolor="#CCCCCC">

 <input style="text-align:center" type="submit" value="提交" onclick=" return docheck()">/*return docheck()是返回给网页 判定 真假 */

</td>

  </td>

  <td width="50%">&nbsp;</td>

</tr>

</table>

</form>

</body>

</html>

<script language="javascript">

var c=document.getElementById("uid").style.color;/*注意取变量的位置 有时候会在判定前 没有效果，最上面有一个 没有效果*/


/*下面是用户名中必填效果的函数*/
function  dofocus()

{

    var b=document.getElementById("uid");

    if(b.value=="必填"&&b.style.color==c)

    {

    b.value="";

    b.style.color="black";

    }

}

function doblur()

{

    var b=document.getElementById("uid")

    if(b.value.length=="0")

    {

        b.value="必填";

        b.style.color=c}

    }
/* 一起验证 注意error变量的用法*/

function yonghu()

{

    var error="";

    var d=document.getElementById("uid");

    if(d.value=="必填"||d.value.length==0)

  {

    return "用户名不能为空。\n"

    }

    else

    {

        return ""

    }

}

    function mima()

    {   var error="";

        var d1=document.getElementById("pwd1")

        var d2=document.getElementById("pwd2")

        if(d1.value.length==0)

        {

            error+="密码不能为空\n";

        }

            if(d2.value.length==0)

            {

                error+="确认密码不能为空\n";

                }

         if (d1.value!=d2.value)

        {  error+="2次密码不一致.\n";

            }

                return error;

    }

    function checkEmail()

    {var error="";

        var d=document.getElementById("txtEmail");

        if(d.value.length==0)

        {

            error+="邮箱不能为空。\n";

            }

            else

            {

        var reg =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

                if(d.value.match(reg)==null)

                   {

                    error+="邮箱格式错误。\n";

                    }

                }

                return error;

        }

function docheck()

{

    var allerror="";

allerror+=yonghu();

allerror+=mima();

allerror+=checkEmail();

    if(allerror.length==0)

    {

        return true;

        }

        else

        {

            alert(allerror);

            return false;

            }

    }

</script>

案例2 微博输入字数限制

<script language="javascript">

function jisuan()

{

    var d = document.getElementById("txt");

    var s = d.value;

    var span = document.getElementById("num");

    span.innerHTML = 140-s.length;

    window.setTimeout("jisuan()",500)/*如果用鼠标点右键粘贴 会失去onkeyup的效果 用延时解决*/

}

</script>

</head>

<body>

    <form action="" method="get">

        <textarea id="txt" name="txt" cols="50" rows="10" onmousedown="jisuan()" onkeyup="jisuan()"></textarea>

        <div>你还可以再输入<span id="num">140</span>个字</div>

    </form>

</body>

</html>

script 表单验证的更多相关文章

  1. Jquery表单验证

    .代码中添加引用(必备引用) <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript&quo ...

  2. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  3. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  4. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  5. jqury表单验证

    结合天天生鲜的用户注册页面,学习验证表单js register.js--表单验证源码 $(function(){ var error_name = false; var error_password ...

  6. jquery-4 完整表单验证实例

    jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...

  7. Java Script基础（十一） 表单验证

    一.表单验证的必要性: 表单验证在客户端和服务器端,客户端验证实际是直接调用JavaScript脚本对用户输入的数据进行验证:而服务器也同样可以实现数据验证,但是当服务器压力过大时,资源损耗会比较严重 ...

  8. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  9. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

随机推荐

  1. （四）Angularjs - 小实例（2）

    自定义指令编写时钟 模板 <!-- 模板文件 --><html> <!-- 内置的ng-app指令通知编译器启动AngularJS框架--> <body ng ...

  2. Linq中字段数据类型转换问题（Linq to entity,LINQ to Entities 不识别方法"System.String ToString()"问题解决）

    1.在工作中碰到这样一个问题: 使用linq时,需要查询两个表,在这两张表中关联字段分别是int,和varchar()也就是string,在linq中对这两个字段进行关联, 如果强制类型转换两个不同类 ...

  3. 武汉科技大学ACM ：1005: A+B for Input-Output Practice (V)

    Problem Description Your task is to calculate the sum of some integers. Input Input contains an inte ...

  4. 【转】setStyleSheet用法

    [转自]http://blog.csdn.net/seanyxie/article/details/5925723 使用setStyleSheet来设置图形界面的外观: QT Style Sheets ...

  5. DBA优化SQL采用的WITH AS 用法简介

    一.WITH AS简介 WITH AS的用法从oracle 9i新增的,官方文档也称之为:subquery factoring;在进行复杂的查询.统计等操作时使用with as 子句可以大大提高性能! ...

  6. linux上ln命令详细说明

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  7. windows编辑文本和unix编辑文本的回车符问题

    我们的开发环境一般都使用windows操作系统,而测试环境和线上环境一般使用linux.windows下编辑的shell脚本,上传到windows下会发生错误.出现两种情况: 1.BOM头问题,前面有 ...

  8. 项目设计&重构&性能优化

    漫谈项目设计&重构&性能优化 重构的好处:重构能够改进软件设计,随着项目需求的变更,项目体积的变大早已与最初的设计大相径庭,代码结构变得凌乱.复杂,如果不进行重构,则很难添加新的功能. ...

  9. AndroidStudio1.1.0配置使用androidannotations

    1:从GitHub上下载最新版androidannotations-api-3.3.1.jar 2:新建Module:my-aa-test 3:将androidannotations-api-3.3. ...

  10. JAVA中，字符串STRING与STRINGBUILDER的效率差异

    如果可变字符串操作较多的话,用STRINGBUILDER显然优势得多. public class HelloJava { public static void main(String[] args) ...