本文共 2235 字，大约阅读时间需要 7 分钟。

还记得我之前写过的一文吗？之前我是使用JavaScript完成了表单的简单校验，即在用户提交表单的时候，我们最好是能够在用户数据提交给服务器之前去做一次校验，防止服务器压力过大，并且需要给用户一个友好提示。

trigger和triggerHandler

查看jQuery API帮助文档可知：

• trigger：在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false；
• triggerHandler：这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

下面通过一个示例让初学者更加清晰直观地了解这两个事件处理函数。

在Chrome浏览器上的运行效果如下。

使用jQuery完成表单校验

为了给用户一个样式友好的提示，我提前准备好了一个样式层叠表——style.css，其内容如下：

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(../img/reg3.gif) no-repeat 0 center;	padding-left:25px;}.onSuccess{
       background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;	padding-left:25px;}.high{
       color:red;}/*  div,span,p {    width:140px;    height:140px;    margin:5px;    background:#aaa;	border:#000 1px solid;    float:left;    font-size:17px;    font-family:Verdana;  }  div.mini {     width:55px;    height:55px;    background-color: #aaa;    font-size:12px;  }  div.hide {     display:none;  }*/table		{
    border:0;border-collapse:collapse;}td	{
    font:normal 12px/17px Arial;padding:2px;width:100px;}th			{
    font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}.even		{
    background:#FFF38F;}  /* 偶数行样式*/.odd		{
    background:#FFFFEE;}  /* 奇数行样式*/.selected		{
    background:#FF6500;color:#fff;}

读者要做的事就是导入样式层叠表——style.css。首先我从自己编写的注册页面中抽出核心代码如下：

			
   				
   						
   
			
    
     				用户名：
     			
    
			
    
     				密码：
     			
    
			
    
     				手机号：
     			
    
			
    
				
     			
    
		
   
	

接着就要编写jQuery代码完成注册页面表单的简单校验了。

注意，jQuery中可以这样链式调用：

$(".bitian").blur(function () {
   }).focus(function() {
   }).keyup(function() {
   });//链式调用

这样，在Chrome浏览器上运行，效果如下：

转载地址：https://liayun.blog.csdn.net/article/details/85931181 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！