表单验证：
一、非空验证：
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. 1201.1——Vim编辑器的相关操作

    一 vi的操作模式 vi提供两种操作模式:输入模式(insert mode)和指令模式(command mode).在输入模式下,用户可输入文本资料.在指令模式下,可进行删除.修改等各种编辑动作. 在 ...

  2. JavaScript 之 使用 XMLHttpRequest 上传文件

    <div id="div1"> <input type="file" id="uploadfile" style=&quo ...

  3. react-native-router-flux 下部导航

    github url:https://github.com/aksonov/react-native-router-flux API: https://github.com/aksonov/react ...

  4. 【C++学习之路】派生类的构造函数（三）

    三.多层继承的派生类 1.多层继承的派生类只需在构造函数的初始化列表中写出直接基类的构造函数即可 class student { public: student(int n, string nam) ...

  5. vs2012远程调试

    不知道大家有没有遇到过这种情况,刚开发完的程序,明明在本机能够好好的运行,可是部署到服务器过分发给用户时,总是出现莫名其妙的错误. 一时半会又看不出问题来,怎么办呢?难道只能在服务器或是客户电脑上装一 ...

  6. apache配置多站点

    在httpd.conf文件中,有如下配置(注:舍去httpd.conf文件的注释内容) Listen 80 ServerName localhost <Directory /> Allow ...

  7. [Python 3.x 官方文档翻译]The Python Tutorial Python教程

    Python is an easy to learn, powerful programming language. It has efficient high-level data structur ...

  8. 《python基础教程》笔记之 异常

    按自己的方式出错 使用raise语句引发一个异常,可以使用一个类(应该是Exception的子类)或者实例参数来作为raise的引发对象.使用类时,程序会自动创建实例,如 >>> r ...

  9. 内联汇编和JMP到内联函数注意事项

    对于jmp类型的hook, 如果自己的过程没有使用_declspec(naked),那么系统会自动给添加一些额外的代码,控制堆栈平衡,但是这些额外的代码会破坏被hook函数的堆栈. 对于call类型的 ...

  10. UCOS 杂项 笔记

    1.  建立任务和建立数据队列  哪个先建立? 经过试验得知,数据队列和任务的建立先后没有顺序,都可以正常运行. 2.关于主函数的面试问题. 主函数写法有:   int  main()    和voi ...