jQuery Validate表单验证

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script type="text/javascript">
    $("#addSysRoleForm").validate({
        rules : {
            roleCode : {
                required : true,//必须输入的字段
                maxlength : 20  //输入长度最多是 5 的字符串(汉字算一个字符)
            },
            roleName : {
                required : true,
                maxlength : 20
            },
            remark : {
                maxlength : 200
            }
        },
        errorClass : "help-inline", //指定错误提示的 css 类名,可以自定义错误提示的样式。默认值error
        errorElement : "span",//用什么标签标记错误,默认是 label,可以改成 em。
        highlight : function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('error');
        },
        unhighlight : function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('error');
            $(element).parents('.form-group').addClass('success');
        },
        submitHandler : function() { //通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。
            var url = basePath+"admin/adminSysRole/saveAdd";
            $.ajax({
                url : url,
                type : "post",
                data : $("#addSysRoleForm").serialize(),
                async : false,
                success : function(data) {
                    var result = eval('(' + data + ')');
                    var resultObj = isJSONObject(result)?result:eval('(' + result + ')');
                    if (resultObj.success) {
                        loadAdminData();
                        //阻止表单提交
                        return false;
                    } else {
                        layer.msg(resultObj.msg,{icon:2});
                        //阻止表单提交
                        return false;
                    }
                },
                error : function() {
                    layer.msg("获取数据失败,请稍后重试!",{icon:2});
                    //阻止表单提交
                    return false;
                }
            });
        }
    });
script>
<form class="form-inline " id="addSysRoleForm" novalidate="novalidate">
    <div class="modal-content" style="width: 600px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">×span>
            button>
            <h4 class="modal-title" id="myModalLabel">新建系统角色h4>
        div>
        <div class="modal-body row-fluid ">
            <div class=" padding-top-sm row">
                <div class="form-group col-md">
                    <label class="label-four">角色代码:label>
                    <input
                        type="text" class="form-control-new" name="roleCode"
                        placeholder="角色代码" style="width: 60%">
                div>
                <div class="form-group col-md padding-top-sm">
                    <label for="exampleInputEmail2" class="label-four">角色名称:label> <input
                        type="text" class="form-control-new" name="roleName"
                        placeholder="角色名" style="width: 60%">
                div>
                <div class="form-group col-md padding-top-sm">
                    <label class="label-two">状态:
                    <input type="radio" name="status" checked value="0"/>启用
                    <input type="radio" name="status" value="1"/>停用lable>
                div>
                <div class="form-group col-md padding-top-sm">
                    <label>是否管理员:
                    <input type="radio" name="isAdmin" checked value="0"/><input type="radio" name="isAdmin" value="1"/>lable>
                div>
                <div class="form-group form-group-textarea col-md-12 padding-top-sm">
                    <label class="label-remark">备注:label>
                    <textarea class="form-control" rows="3" name="remark"
                        style="width:64% !important">textarea>
                div>
            div>
        div>
        <div class="modal-footer">
            <button type="button" class="btn btn-sm2 btn-default" data-dismiss="modal">取消button>
            <button type="submit" class="btn btn-sm2 btn-00967b" id="saveButton">保存button>
        div>
    div>
form>

你可能感兴趣的:(JS,jquery,表单)