jQuery验证样式

分享于 

9分钟阅读

Web开发

  繁體

介绍

这个应用程序借助jQuery插件进行简单的客户端表单验证。 这里我想用HTML和jQuery的基本示例展示不同的jQuery验证风格。


我在 http://saffroze.com/jquery-validation-styles/ 发表了文章。

背景

使用jQuery验证表单验证和jQuery验证库具有远程验证功能,ASP.NET MVC库非常容易,你可以找到更多关于它的功能 http://docs.jquery.com/Plugins/validation

  • 每个验证属性都有一个ToJson方法,它将属性序列化为字典
    
    $("#form").validate({
    
    
    
    rules: {
    
    
    
    firstname: { required: true, minlength: 5, maxlength: 10 },
    
    
    
    lastname: { required: true, minlength: 5, maxlength: 10 },
    
    
    
    email: { required: true, email: true },
    
    
    
    mobile: { required: true, digits: true, minlength: 10, maxlength: 10 }
    
    
    
    }
    
    
    
    });
    
    
    
    
  • 所有错误标签都显示为 inside 一个带有 error"validationsummary"附加容器的错误消息列表。 出现错误时,将显示和隐藏作为"errorcontainer"提供的元素。
    
    errorContainer: "#validationSummary"
    
    
    
    
  • 错误标签本身被添加到作为errorLabelContainer给出的元素中,这里有一个无序的列表。
    
    errorLabelContainer: "#validationSummary ul"
    
    
    
    
  • 因此,错误标签也被封装到li元素( 包装选项)。
    包装器:li"
  • 自定义消息显示处理程序。 以第一个参数和错误的形式获取错误的映射,在验证器对象的上下文中调用错误。
    
    showErrors: function (errorMap, errorList) {
    
    
    .
    
    
    .
    
    
    .
    
    
    } 
    
    
    
    

实现

这个代码演示了一个基本的jQuery验证示例,jQuery验证插件在提交表单之前验证表单,如果表单有效它提交表单,否则表单不会被提交。
  • 在页面中包含jQuery插件和验证脚本。




<script type="text/javascript" src="../../Scripts/jquery.validate.js">&lt;/script>



 &lt;script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.js">&lt;/script> 



  • 在页面中添加以下脚本。 它非常描述,所以不需要解释每一行。

 $(document).ready(function () {


 //Set border color when text class getting focus or remove border color when lost focus from textbox.


 $('.text')


. focus(function () { $('.text').removeClass('focused'); $(this).addClass('focused'); })


. blur(function () { $(this).removeClass('focused'); });



 //Fire validation events


 $("#form").validate({



 //Setting validation type like, Required, Minimum or Maximum Length, Data Type etc.


 rules: {


 firstname: { required: true, minlength: 5, maxlength: 10 },


 lastname: { required: true, minlength: 5, maxlength: 10 },


 email: { required: true, email: true },


 mobile: { required: true, digits: true, minlength: 10, maxlength: 10 }


 },



 //All error labels are displayed inside an unordered list with the ID"validationSummary"


 //Additonal container for error messages. The elements given as the"errorContainer" are all shown and hidden when errors occur.


 errorContainer: "#validationSummary",



 //But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list.


 errorLabelContainer: "#validationSummary ul",



 //Therefore the error labels are also wrapped into li elements (wrapper option).


 wrapper: "li",



 //A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, 


 //called in the context of the validator object.


 showErrors: function (errorMap, errorList) {


 $('.errorList').hide();


 $('.inlineMessage').hide();


 $('#validationSummary').hide();


 var messages = "";


 $.each(errorList, function (index, value) {


 var id = $(value.element).attr('id');


 messages += "<span>" + (index + 1) + ". <a title='click to view field' href='javascript:setFocus(" + id + ");'>[" + $(value.element).attr('name') + "]</a>" + value.message + "</span>


";


 });


 messages = "



<div class='errorWrapper'>



<h1>Please correct following errors:</h1>



" + messages + "</div>



";


 switch ($('input[name=DisplayType]:checked', '#form').val()) {


 case "Popup":



 //Showing validation summary in Popup window


 $('#dialog-validation').html(messages);


 $('#dialog-validation').dialog('open');


 break;


 case "Summary List":



 //Showing validation summary in list of the same page


 $('#summary-validation').html(messages);


 $('#summary-validation').show("fast");


 break;


 case "Inline":



 //Showing validation in inline format


 $.each(errorList, function (index, item) {


 $(item.element).next('div').html("<span style='font-weight:bold'>[" + $(item.element).attr('name') + "]</span>" + item.message);


 $(item.element).next('div').show("fast");


 });


 break;


 }


 },



 //If all validations are successfully validate then execute submitHandler function


 submitHandler: function () {


 $('#summary-validation').empty();


 $('#dialog-validation').empty();


 alert("All fields are valid!")


 }


 })



 //jQuery Modal Dialog boxes can also use to display list of validation erorrs.


 $("#dialog-validation").dialog({


 resizable: false,


 height: 190,


 width: 350,


 modal: true,


 autoOpen: false,


 title: "Validation Errors",


 buttons: {


 "Ok": function () {


 $(this).dialog("close");


 $('.focused').focus();


 }


 }


 });


 });



 //If validation errors are occured in any field, it will display field name with link, clicking on link it will set focus of perticular field.


 function setFocus(ele) {


 $(ele).focus();


 }



  • HTML页面:
  • 如果需要在字段附近显示验证,则应该强制使用类 NAME的"inlinemessage"添加""。

<div class="formWrapper" id="formStyle"><form id="form" action="" method="post" name="form"><label>First Name</label> <input id="firstname" class="text" type="text" name="firstname" />


<div class="inlineMessage"></div> </form>


</div>



  • 错误消息的隐藏容器

<div id="validationSummary">


 <ul class="errorMessageList">


 </ul>


 </div>



  • 在同一页面中显示验证摘要

<div style="display: none;" id="summary-validation" class="errorList">


 </div>



  • 在模式对话框中显示验证摘要。

<div style="display: none;" id="dialog-validation" class="errorList">


 </div>



  • 为表单。Inputbox。按钮。对话框和验证 Messages.Please 添加样式访问 Views/Shared/_Layout.cshtml

你的想法

如果你发现一些问题或者 Bug,只留下评论或者给我发电子邮件。 如果你对这个做了任何注释,让我也知道这样,我不必重做你的任何工作。 如果有帮助的话,请提供一个的"投票"

style  样式  
相关文章