表单验证：
一、非空验证：
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. oracle单行函数之字符函数

    Lower--转换为小写 upper--转换为大写 Initcap--首字母大写 concat--连接字符 substr--截取字符 length/length--获取字符串长度(字节长度) inst ...

  2. GUI对话框

    消息对话框 public static void showMessageDialog(Component parentComponent,String message,String title,int ...

  3. uva 10077 - The Stern-Brocot Number System

    想法: 初始化三個數L=0/1, M=1/1, R=1/0,設輸入的分數為a: 如果a<M,那麼要往左邊走,    R = M;    M = (L分子+M分子)/(L分母+M分母); 如果a& ...

  4. Struts2 文件下载

    使用Struts2做一个简单的文件下载. 首先,导包,写配置文件就不说了. 进入主题. 文件下载操作类:FileDownload.java import java.io.InputStream; im ...

  5. 在 html 中用加色法混合颜色

    概要 本文通过解决一个假想的问题介绍了 css screen 混合模式,并介绍了如何用 svg 滤镜.canvas 2d.canvas webgl 实现相同的效果. 问题 下面的图片演示三种颜色光叠加 ...

  6. acdream暴力专场中的优美暴力

    F - 小晴天老师系列——苹果大丰收 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Other ...

  7. cf C. Maze

    http://codeforces.com/problemset/problem/378/C #include <cstdio> #include <cstring> #inc ...

  8. 如何判断一个C++对象是否在堆栈上（通过VirtualQuery这个API来获取堆栈的起始地址，然后就可以得到答案了），附许多精彩评论

      昨天有人在QQ群里问到如何判断一个C++对象是否在堆栈上, 我在网上搜索了下, 搜到这个么一个CSDN的帖子http://topic.csdn.net/t/20060124/10/4532966. ...

  9. 为兴趣求职：如何学习UI框架，请将你的看法观点写在评论下面

    前言:此篇文章是就我女朋友的求职和前端学习经历而写,希望得到UI前辈的热心指点,不胜感激涕零! 地理坐标: 中国,四川,成都 求职经历: 她之前找过两份工作,第一份是金融销售专员,第二份是汽车保险.她 ...

  10. 护肤品总结 Skin Care (1)

    很久没有更博了,最近过年在家,就写些生活上面的总结吧- 从护肤品开始,接下来陆陆续续会有化妆品,北美生活购物等. 因为是学生党,所以此帖中的东西基本都是价钱适中.因为经常买买买,所以用的好的坏的都会在 ...