运用jQuery写的验证表单(实例讲解)

更新时间：2017年07月06日 08:17:04 投稿：jingxian

下面小编就为大家带来一篇运用jQuery写的验证表单(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

//运用jQuery写的验证表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="js/jquery-1.3.1.js"></script>
  <script src="js/lib/jquery.validate.js"></script>
  <script src="js/lib/jquery.validate.messages_cn.js"></script>
  <style>
    body {
      font: 12px/19px Arial, Helvetica, sans-serif;
      color: #666;
    }

    form div {
      margin: 5px 0;
    }

    .int label {
      float: left;
      width: 100px;
      text-align: right;
    }

    .int input {
      padding: 1px 1px;
      border: 1px solid #ccc;
      height: 16px;
    }

    .sub {
      padding-left: 100px;
    }

    .sub input {
      margin-right: 10px;
    }

    .formtips {
      width: 200px;
      margin: 2px;
      padding: 2px;
    }

    .onError {
      background: #FFE0E9 url(images/reg3.gif) no-repeat 0 center;
      padding-left: 25px;
    }

    .onSuccess {
      background: #E9FBEB url(images/reg4.gif) no-repeat 0 center;
      padding-left: 25px;
    }

    .high {
      color: red;
    }
  </style>
  <script>
    $(function () {
      $("form :input.required").each(function () {
        var $required = $("<strong class='high'>*</strong>");
        $(this).parent().append($required);
      })
      $("form :input").blur(function () {
        var $parent = $(this).parent();
        $(".formtips").remove();
        if ($(this).is("#username")) {
          if (this.value == '' || this.value.length < 6) {
            var errmsg = '请输入正确的格式.';
            $parent.append('<span class="formtips onError">' + errmsg + '</span>')
          } else {
            var sucssemsg = '格式输入正确';
            $parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
          }
        }
        if ($(this).is("#email")) {
          //邮箱格式正则表达式的用法
          if (this.value == '' || ( this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {
            var errmsg = '请输入正确的格式.';
            $parent.append('<span class="formtips onError">' + errmsg + '</span>')
          } else {
            var sucssemsg = '格式输入正确';
            $parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
          }
        }
      })
      $("#send").click(function () {
          var onerr = $(this).parent().siblings().children().hasClass("onError");//出错就会添加class为onerror的元素
          if(onerr) {
            return false;
          } else {
            alert("你已经注册成功了");
          }
        }
      )
      $("#reset").click(function () {
        $(".formtips").remove();
      })
    })
  </script>
</head>
<body>

<form method="post" action="">
  <div class="int">
    <label for="username">用户名:</label>
    <input type="text" id="username" class="required"/>
  </div>
  <div class="int">
    <label for="email">邮箱:</label>
    <input type="text" id="email" class="required"/>
  </div>
  <div class="int">
    <label for="personinfo">个人资料:</label>
    <input type="text" id="personinfo"/>
  </div>
  <div class="sub">
    <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
  </div>
</form>

</body>
</html>

以上这篇运用jQuery写的验证表单(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jquery操作复选框checkbox的方法汇总
这篇文章主要介绍了jquery操作复选框checkbox的方法,实例汇总了jQuery针对checkbox进行判断与赋值的各种常用操作技巧,需要的朋友可以参考下
2015-02-02
jQuery中:enabled选择器用法实例
这篇文章主要介绍了jQuery中:enabled选择器用法,实例分析了:enabled选择器的功能、定义及选取所有可用元素的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery实现html双向绑定功能示例
这篇文章主要介绍了jQuery实现html双向绑定功能,涉及jQuery针对HTML页面元素事件绑定相关操作技巧,需要的朋友可以参考下
2017-10-10
基于jquery的动态创建表格的插件
工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。
2011-04-04
jquery对象和DOM对象的区别介绍
jquery对象和DOM对象在使用过程很频繁，正是因为如此，好多朋友都不知道它们之间有什么区别，下面为大家详细介绍下，希望对大家有所帮助
2013-08-08
jQuery基础知识点总结(必看)
下面小编就为大家带来一篇jQuery基础知识点总结(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jQuery中get和post方法传值测试及注意事项
jQuery 的 get 和 post 方法有三个参数：地址，数据和回调函数，刚刚做了几个实验，看看下面的代码就清楚了
2014-08-08
JQuery实现Ajax加载图片的方法
这篇文章主要介绍了JQuery实现Ajax加载图片的方法,涉及jQuery基于缓存获取图片的技巧,需要的朋友可以参考下
2015-12-12
jQuery DateTimePicker 日期和时间插件示例
jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，这篇文章主要介绍了jQuery DateTimePicker 日期和时间插件示例，有兴趣的可以了解一下。
2017-01-01
jQuery简单绑定单个事件的方法示例
这篇文章主要介绍了jQuery简单绑定单个事件的方法,结合具体实例形式分析了jQuery使用bind方法进行事件绑定与事件响应的相关操作技巧,需要的朋友可以参考下
2017-06-06