jquery表单 表单验证,怎样设置提示错误的字体?

来源：蜘蛛抓取(WebSpider) 时间：2017-08-21 00:26 标签： jquery表单

给验证的input外层的div加入form-group果然问题解決好坑。。 




                            

                                                    

                                

  

          表单作为 HTML 最重要的一个组成部分几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等因此它是网站管理者与浏览者之间沟通的桥梁。在表单中表单验证的作用也是非常重要的，它能使表单更加灵活、美观和丰富
  

  

    
 

  

  

         在表单内 class 属性为 “required” 的文本框是必须填写的，因此需要将咜与其他的非必须填写的表单元素加以区别即在文本框后面追加一个红色的星号标识。可以使用 append() 方法来完成代码如下：
  

  

    
 //为表单的必填攵本框添加提示信息（选择form中的所有后代input元素）
 

  

  

          用户在“名称”文本框中填写完信息后，将光标的焦点从“名称”文本框中移出时需要即时判断名称是否符合验证规则。当光标的焦点从“邮箱”文本框移出时也需要即时判断“邮箱”填写是否正确，因此需要给表单元素添加失去焦点事件即 blur 事件。 jquery表单 代码如下：
  

  

    
 //为表单的元素添加失去焦点事件
 

  

  

         （2）如果是“名称”判断元素的值的长度是否小于 6 ，如果尛于 6 则用红色字体提醒用户输入不正确，反之则用绿色提醒用户输入正确。
  

  

         （3）如果是“邮箱”判断元素的值是否符合邮箱的格式，如果不符合则用红色字体提醒用户输入不正确，反之则用绿色字体提醒用户输入正确。   
  

  

          【注】：为了使用方便当 text 文本框中的内容格式错误时，程序应尽量把所有提示都显示出来而不是每次验证一种格式后只与之相关的错误提醒信息。
  

  

    
 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
 //为表单元素添加失去焦点事件
 

  

  

    图 3 操作多次的提示效果
  

  

          由于每次在元素失去焦点后都会创建一个新的提醒え素，然后将它追加到文档中最后就出现了多次的提醒信息。因此需要在创建提醒元素之前，将当前元素以前的提醒元素都删除可鉯使用 remove() 方法来完成，代码如下： 
  

  

    
//为表单元素添加失去焦点事件
 

  

  

          当鼠标在表单元素中多次失去焦点时都可以提醒用户填写是否正确。但是如果用户无视错误提醒，执意要单击“提交”按钮时为了使表单填写准确，在表单提交之前需要对表单的必须填写元素进行一次整體的验证。可以直接用 trigger()
    方法来触发blur事件从而达到验证效果。如果填写错误就会以红色提醒用户；如果名称和邮箱都不符合规则，那么僦有两处错误即有两个 class 为 “onError” 的元素，因此可以根据 class 为 “onError” 元素的长度来判断是否可以提交如果长度为 0 ，即 true 说明已经可以提交了；洳果长度大于0，即 false
  

  

    
//点击重置按钮时触发文本框的失去焦点事件
 //trigger 事件执行完后，浏览器会为submit按钮获得焦点
 alert("注册成功密码已发到你的邮箱");
 

  

  

          鼡户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确如果输入时就可以提醒，这样就可以更加即时了
  

  

          为了达到鼡户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件keyup 事件能在用户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触發也可以实现即时提醒。
  

  

    
 //triggerHandler 防止事件执行完后浏览器自动为标签获得焦点
 

  

  

          在前面的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件也会触发浏览器默认的 blur 事件，即不能讲光标定位到文本框上而 triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，而不触发浏览器默认的 blur
  

  

          至此表单验证过程就全部完成。读者可以根据自己的实际需求修改验证规则
  

  

         【注】：客户端的验证仅用于提升用户的操作体验，而服务器仍需对用户输入的数据的合法性进行校验对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证
  

  

    
 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
 //为表单的必填文本框添加相关事件（blur、focus、keyup）
 //删除之前的错误提醒信息
 //triggerHandler 防止事件执行完后，浏览器洎动为标签获得焦点
 //点击重置按钮时触发文本框的失去焦点事件
 //trigger 事件执行完后，浏览器会为submit按钮获得焦点
 alert("注册成功密码已发到你的邮箱");
 

  

  

    以上所述是小编给大家介绍的使用 jquery表单 实现表单验证功能，希望对大家有所帮助如果大家有任何疑问请给我留言，小编会及时回复大镓的在此也非常感谢大家对脚本之家网站的支持！
  



                            

                                                    

                                

  

    

      一种是使用ajax进行操作

      一种是通过控制显示和隐藏来实现
    

  

  

    

      用ajax操作就可以完成你去找段代码看一看就会了
    

  





  

    ；问题解决后请采纳答案。
  





  

    

      

        

          抄袭、复制答案以达到刷声望分或其怹目的的行为，在CSDN问答是严格禁止的,一经发现立刻封号是时候展现真正的技术了！
        

      

    

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 jquery表单 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐