网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery validate+artdialog+jquery form实现弹出表单思路详解
内容
    在项目需求中有这样一功能：在页面弹出一个form表单，ajax无刷新提交表单，表单需通过验证。下面小编给大家介绍通过jQuery validate+artdialog+jquery form实现弹出表单思路详解，需要的朋友参考下吧
    功能描述：
    在页面弹出一个form表单，ajax无刷新提交表单，表单需通过验证。
    适用范围：
    适用于在列表页面新增，修改记录。
    需要加载的js文件：
    jquery.min.js
    artDialog.js
    iframeTools.js
    jquery.form.js
    jquery.validate.js
    实现思路：
    在页面中将表单放到一个隐藏的容器中，用artdialog弹出该form并对form加上jqueryvalidate验证，提交采用jqueryform ajax提交，由于都是用现成的插件写作代码量很少。
    <div id="g_cn">
    <table id="base_info" width="96%">
    <!-- 新闻内容 -->
    <tr>
    <td width=20%>花名：</td>
    <td><input readonly onFocus="this.blur()" type="text" id="bHname" value=""></td>
    <td width=20%>花名拼音：</td>
    <td><input readonly onFocus="this.blur()" id="bSpell" type="text" value=""></td>
    </tr>
    <tr>
    <td width=15%>姓名：</td>
    <td><input readonly onFocus="this.blur()" id="bEmpName" type="text" value=""></td>
    <td width=15%>性别：</td>
    <td><input readonly onFocus="this.blur()" id="bH_sex" type="text" value=""></td>
    </tr>
    <tr>
    <td width=15%>部门：</td>
    <td><input readonly onFocus="this.blur()" id="bDept" type="text" value=""></td>
    <td width=15%>职务：</td>
    <td><input readonly onFocus="this.blur()" id="bPosition" type="text" value=""></td>
    </tr>
    <tr>
    <td width=15%>申请时间：</td>
    <td><input readonly onFocus="this.blur()" id="bRegTime" type="text" value=""></td>
    <td width=15%>审核时间：</td>
    <td><input readonly onFocus="this.blur()" id="bAuditTime" type="text" value=""></td>
    </tr>
    <tr>
    <td width=15%>花名出处：</td>
    <td><input readonly onFocus="this.blur()" id="bFrom" type="text" value=""></td>
    <td width=15%>花名注释：</td>
    <td><input readonly onFocus="this.blur()" id="bRemark" type="text" value=""></td>
    </tr>
    </table>
    </div>
    a
    <script language="javascript" type="text/javascript">
    //form验证
    $.validator.addMethod('checkHname', function() {
    var validate=false;
    var hname = $("#r_c").val().replace(/\s/g,'').substr($("#r_c").val().length-2,2);
    $.ajax({
    url : "/mipdemo/app/hname/index.php?r=hname/checkHname",
    data : { 'hname':hname, 'empid':$("#username").val() },
    type : "get",
    async : false,
    cache : false,
    timeout : 10000,
    success : function(data) {
    eval('var result ='+ data);
    validate = result.pass;
    strHnameValideResult = result.message;
    if(validate === true || validate === 'true'){
    $('#spell').val(result.pinyin);
    $('#hname').val(hname);
    }
    }
    });
    return validate;
    });
    //form验证
    $.validator.addMethod('checkUser', function() {
    var validate=false;
    var username = $("#username").val();
    if(username != "0"){
    validate = true;
    }
    return validate;
    });
    //form验证
    $.validator.addMethod('checkSex', function() {
    var validate=false;
    $("input[name='h_sex']").each(function(){
    if($(this).attr("checked")=="true"){
    validate = true;
    }
    })
    return validate;
    });
    $('#myForm').validate({
    errorPlacement: function(error, element){
    if(element.attr("name") != "h_sex"){
    element.parent().find('label').remove();
    }else{
    element.parent().find('label.onError,label.onCorrect').remove();
    }
    element.parent().append(error.attr('class','onError'));
    },
    success: function(label){
    label.removeClass("onCorrect").removeClass("onError");
    label.addClass('onCorrect').text('');
    },
    onkeyup: true,
    rules : {
    r_a:{
    min:1
    },
    r_b:{
    required:true
    },
    r_c:{
    required:true,
    minlength:2,
    maxlength:2,
    checkHname:true
    },
    h_sex:{
    required:true
    }
    },
    messages : {
    r_a:{
    min:'作品类型必选'
    } ,
    r_b:{
    required:'作品名称必填'
    },
    r_c:{
    required:'花名必填',
    minlength:"请输入2个中文",
    maxlength:"请输入2个中文",
    checkHname: '该花名已使用或不符合规则'
    },
    h_sex:{
    required:"性别必选"
    }
    }
    });
    $(document).ready(function() {
    var options = {
    target: '#output2',
    success: showResponse // post-submit callback
    };
    $('#myForm').ajaxForm(options);
    var alt =null;
    $("#List_ViewTable tr").click(function(){
    var empid = $(this).find("input[type='checkbox']").val();
    if(empid != ""){
    $.ajax({
    url : "/mipdemo/app/hname/index.php?r=hname/userInfo",
    data : { 'empid':empid },
    type : "get",
    cache : false,
    timeout : 10000,
    success : function(data) {
    var result = $.parseJSON(data);
    $("#bHname").val(result.hname);
    $("#bSpell").val(result.spell);
    $("#bEmpName").val(result.EmpName);
    $("#bH_sex").val(result.h_sex);
    $("#bDept").val(result.deptName);
    $("#bPosition").val(result.PositionName);
    $("#bRegTime").val(result.regtime);
    $("#bAuditTime").val(result.audit_time);
    $("#bFrom").val(result.r_a + result.r_b);
    $("#bRemark").val(result.r_d);
    if(alt !=null){
    alt.close();
    }
    alt=art.dialog({
    title:'用户信息',
    content: document.getElementById('g_cn'),
    width:750,
    button: [
    {
    name: '保存',
    focus: true,
    callback: function () {
    $('#myForm').submit();
    return false;
    }
    },
    {
    name: '关闭',
    callback: function () {
    }
    }
    ]
    });
    }
    });
    }
    });
    function showResponse(data){
    if(alt !=null){
    alt.close();
    }
    if(data=='success'){
    artDialog.alert('保存成功');
    }else{
    art.dialog.close();
    artDialog.alert('保存失败');
    }
    }
    });
    </script>
    以上所述是小编给大家介绍的jQuery validate+artdialog+jquery form实现弹出表单思路详解，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 4:12:09