• 首页

    • validation 的js是做什么用的

    如题所述

    推荐答案   2015-07-23
    jQuery.validationEngine plugin是一个旨在校验表单元素的javascript插件。目前在IE6-8、Chrome、Firefox、Safari、Opera等浏览器上表现良好。比如校验我们常见的Email、phone、URL等等，对于负责的Ajax调用校验也提供了支持。而且提示信息也可支持多种语言。现在已经发展到了v2.6.2我们可以在github上很轻松的获取到它的源码。
    一下是自己写的一个小例子：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jQuery.validationEngine plugin Demo</title>
    <link type="text/css"rel="stylesheet"href="/static/css/jquery.validation/validationEngine.jquery.css"/>
    <script type="text/javascript"src="/static/js/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript"src="/static/js/jquery.validation/jquery.validationEngine-zh_CN.js"></script>
    <script type="text/javascript"src="/static/js/jquery.validation/jquery.validationEngine.js"></script>
    <script type="text/javascript">

    $(function(){

    var form ="myForm";

    var condition = [

    {name:"username",rule:"validate[required,maxSize[5]]"} ,

    {name:"password",rule:"validate[required] text-input"} ,

    {name:"url",rule:"validate[required,custom[url]]"},

    {name:"letter",rule:"validate[required,custom[onlyLetterNumber]]"},

    {name:"date",rule:"validate[required,custom[date]]"}

    ];

    validationInit(condition,form);

    $("#sub").click(function(){

    console.log("validationform="+$("#"+form).validationEngine('validate'));

    if($("#"+form).validationEngine()){

    return;

    }

    myForm.submit();

    });

    });

    function validationInit(condition,form){

    for(var i = 0; i < condition.length; i++){

    var cond = condition[i];

    $("#"+form+"[name="+cond.name+"]").attr("class",cond.rule);

    }

    $("#"+form).validationEngine('attach',{

    }).css({border:"2px solid #000"});

    }
    </script>
    </head>
    <body>
    <div style="padding-top: 100px">

    <form action=""id="myForm"name="myForm"method="post">

    username:<input type="text"name="username"id="username"/><br/>

    password:<input type="text"name="password"id="password"data-prompt-position="bottomLeft:20px"/><br/>

    url:<input type="text"id="url"name="url"value="http://"/><br/>

    only letter:<input type="text"id="letter"name="letter"value="too many spaces obviously"/><br/>

    date:<input type="text"id="date"name="date"value=""/><br/>

    <input type="button"value="提交"id="sub"/>

    </form>
    </div>
    </body>
    </html>
    可以看出使用了jquery.validationEngine plugin之后页面的校验js代码变得更加整洁了。

    除了上述用法，jquery.validationEngine也可以作用在某个表单元素上

    $("#form.id").validationEngine();
    或
    $("#form.id").validationEngine(action or options);
    validationEngine的几个基本action:

    attach:绑定表单验证
    detach:解除表单验证
    validate:验证控件或表单 返回ture or false
    showPrompt:在某个元素上创建一个提示,3中状态‘pass’，‘error’,'load'
    hide:隐藏对应元素及元素内的提示信息
    hideAll:隐藏页面上的所有提示
    updatePromptsPosition:更新提示层的位置
    从
    $("#"+form).validationEngine('attach',{

    }).css({border:"2px solid #000"});
    可以看出validationEngine方法支持链式调用。

    validationEngine的3中自定义事件
    jqv.form.validating:$("#form").bind("jqv.form.validating",function(event){});表单验证时事件
    jqv.form.result:$("#form").bind("jqv.form.result",function(event,errorFound){});表单验证完成时事件 errorFound：表单验证不通过(true或false)
    jqv.field.result:$("#form").bind("jqv.field.result",function(event,field,isError,promptText){});单个控件验证完成时事件，field 控件对象，isError:控件验证不通过(true或false)promptText: 提示信息
    HTML5属性
    属性名 描述
    data-validation-engine 设置验证规则，除了class验证的另一种选择
    data-validation-placeholder 占位符 当为必填控件验证时值不能为空 也不能为占位符
    data-prompt-position 自定义提示信息的位置，可设置为："topRight","topLeft","bottomRight""bottomLeft","centerRight","centerLeft","inline"可设置更具体的位置，格式为："方向:X偏移值,Y偏移值"。如：data-prompt-position="bottomLeft:20,5"PS：偏移值可以为负数
    data-prompt-target 载入提示信息的容器，值为元素的id 仅在promptPosition或data-prompt-position设置为”inline“时有效

    jquery.validationEngine默认属性值

    // LEAK GLOBAL OPTIONS

    $.validationEngine= {fieldIdCounter: 0,defaults:{

    // 触发控件校验的事件名称

    validationEventTrigger:"blur",

    // 自动滚动视窗到第一个错误位置

    scroll: true,

    // 为第一个input框聚焦

    focusFirstField:true,

    // 是否提示信息

    showPrompts: true,

    // 是否验证不可见元素(如type="hidden"的输入框)

    validateNonVisibleFields: false,

    // 用特殊class属性值 来忽略校验控件

    ignoreFieldsWithClass: 'ignoreMe',

    // Opening box position, possible locations are: topLeft,

    // topRight, bottomLeft, centerRight, bottomRight, inline

    // inline gets inserted after the validated field or into an element specified in data-prompt-target
    //提示信息的位置设定

    promptPosition:"topRight",

    bindMethod:"bind",

    // internal, automatically set to true when it parse a _ajax rule

    inlineAjax: false,

    // if set to true, the form data is sent asynchronously via ajax to the form.action url (get)
    //是否使用Ajax提交表单 默认是get方式

    ajaxFormValidation: false,

    // The url to send the submit ajax validation (default to action) //设置Ajax提交的url 默认为form的action

    ajaxFormValidationURL: false,

    // HTTP method used for ajax validation
    //设置Ajax表单提交时使用的数据传输方式

    ajaxFormValidationMethod: 'get',

    // Ajax form validation callback method: boolean onComplete(form, status, errors, options)

    // retuns false if the form.submit event needs to be canceled.
    //表单提交，Ajax验证完成后的行为

    onAjaxFormComplete: $.noop,

    // called right before the ajax call, may return false to cancel //表单提交验证通过后 Ajax提交之前的回调函数

    onBeforeAjaxFormValidation: $.noop,

    // Stops form from submitting and execute function assiciated with it

    onValidationComplete: false,

    // Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messages

    doNotShowAllErrosOnSubmit: false,

    // Object where you store custom messages to override the default error messages

    custom_error_messages:{},

    // true if you want to validate the input fields on blur event

    binded: true,

    // set to true if you want to validate the input fields on blur only if the field it's not empty

    notEmpty: false,

    // set to true, when the prompt arrow needs to be displayed

    showArrow: true,

    // set to false, determines if the prompt arrow should be displayed when validating

    // checkboxes and radio buttons

    showArrowOnRadioAndCheckbox: false,

    // did one of the validation fail ? kept global to stop further ajax validations

    isError: false,

    // Limit how many displayed errors a field can have

    maxErrorsPerField: false,

    // Caches field validation status, typically only bad status are created.

    // the array is used during ajax form validation to detect issues early and prevent an expensive submit

    ajaxValidCache: {},

    // Auto update prompt position after window resize

    autoPositionUpdate: false,

    InvalidFields: [],

    onFieldSuccess: false,

    onFieldFailure: false,

    onSuccess: false,

    onFailure: false,

    validateAttribute:"class",

    addSuccessCssClassToField:"",

    addFailureCssClassToField:"",

    // Auto-hide prompt

    autoHidePrompt: false,

    // Delay before auto-hide

    autoHideDelay: 10000,

    // Fade out duration while hiding the validations

    fadeDuration: 0.3,

    // Use Prettify select library

    prettySelect: false,

    // Add css class on prompt

    addPromptClass :"",

    // Custom ID uses prefix

    usePrefix:"",

    // Custom ID uses suffix

    useSuffix:"",

    // Only show one message per error prompt

    showOneMessage: false
    温馨提示：答案为网友推荐，仅供参考

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    validation lossjs是用来做什么的chain validationvalidation_datanodejs可以用来做什么fluentvalidationvalidationresultvalidation codejs主要是做什么的
    相关问题
    优化MyEclipse速度中这个validation到底有什...
    jquery-validation 怎么用
    新手问题jsvalidation验证不起作用
    jsValidation的问题
    struts2验证框架validation有用吗?有什么优点...
    一个在JSValidation下伤心痛苦的人拜托了各位 谢谢
    为什么我用Jsvalidation框架时出不来效果呢？我感觉...
    @html.validationmessagefor什么意思

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网