表单验证：
一、非空验证：
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. ORA-16018: cannot use LOG_ARCHIVE_DEST with LOG_ARCHIVE_DEST_n or DB_RECOVERY_FILE_DEST【error收集】

    之前一直没有注意一个事情, 关于设置archive归档路径设置的问题. 设置数据库为归档模式的命令: 1.首先要切换到mount状态: 2.执行alter system archivelog; 3.查 ...

  2. 认识html标签

    让我们通过一个网页的学习,来对html标签有一个初步理解. 平常大家说的上网就是浏览各种各式各样的网页,这些网页都是由html标签组成的. 下面就是一个简单的网页.效果图如下: 我们来分析一下,这个网 ...

  3. Cer Crt Pem Pfx 证书格式转换

    1.从pfx格式的证书提取出密钥和证书set OPENSSL_CONF=openssl.cnfopenssl pkcs12 -in my.pfx -nodes -out server.pemopens ...

  4. 武汉科技大学ACM ：1006: 零起点学算法25——求两点之间的距离

    Problem Description 输入平面坐标系中2点的坐标,输出它们之间的距离 Input 输入4个浮点数x1 y1 x2 y2,分别是点(x1,y1) (x2,y2)的坐标(多组数据) Ou ...

  5. PHP生成数字+字符混合型字符串

    以下是一个用PHP随机生成字符+数字混合型的随机字符串,可用来生成会员ID.用户密码/密钥等内容,函数简单,代码如下: <?php function generate_rand($l){ $c= ...

  6. .net转php laraval框架学习系列（一） 环境搭建

    之前也没写过什么博客,可能文章结构比较混乱,想到那写到哪. 主要是把自己学习中的经验写下来. 为什么选择laravel框架,是因为laravel框架目前是Php最流行的框架,深入研究后发现和asp.n ...

  7. JS中typeof与instanceof的区别 (2010-05-26 10:47:40

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  8. Centos下删除文件名乱码文件

    centos下通过rm命令来删除文件,但是如果要删除文件名乱码的文件,就不能直接使用rm命令了,因为压根就无法输出文件名来.不过借助find命令可以实现对其删除.在linux下对于每个文件都一个对应的 ...

  9. owncloud乱码问题

    没有人回答那我就献丑了,废话有点多,请跳着看. 先说结论:最后我选择了 Seafile 我去年之前用box同步个人文件,前几个月的时候吧,发现box不能上传几百M的文件,我才知道之前为什么会丢文件了… ...

  10. linux c 之signal 和sigaction区别

    http://blog.csdn.net/muge0913/article/details/7331129 要对一个信号进行处理,就需要给出此信号发生时系统所调用的处理函数.可以对一个特定的信号(除去 ...