jquery jsp无法正常工作

时间:2017-10-07 00:10:49

标签: jquery forms validation jsp

只是对空字段进行jquery验证,jquery验证字符数和jquery验证数值不起作用。

     <%@page contentType="text/html" pageEncoding="UTF-8"%>
        <!DOCTYPE html>
        <html>
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/table.css" rel="stylesheet" type="text">
        <link rel="stylesheet" type="text/css" href="estilo.css">
        <style type="text/css">
        </style>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <title>Crear registro de una Persona</title>
        <script type="text/javascript" src="jquery-3.2.1.min"></script>    
        <script type="text/javascript" src="jquery.validate.min"></script>    
        <script type="text/javascript">
        $(document).ready(function() {
        $('#createPersonForm').validate({
        rules: {

        rut: {
        required: true,
        number: true,
        minlength:7
        },
        nombre:{
        required: true,
        minlength:3
        },
        apellido:{
        required: true,
        minlength:4
        },

        });

        </script>            
        </head>
        <body>
            <h1>Crear una Persona</h1>
            <form id="createPersonForm" action="crearPersona.do" method="post">
        <div class="navbar navbar-fixed-center">
        <table>
        <tr><td>Rut:</td><td><input type="text" id="rut" name="rut"    required/><span id="dato1"></span></td></tr>

        <tr><td>Nombre:</td><td><input type="text" id="nombre" name="nombre" required/><span id="dato2"></span></td></tr>

        <tr><td>Apellidos:</td><td><input type="text" id="apellido" name="apellido" required/><span id="dato3"></span></td></tr>

        </table>
        <div class="navbar-inner">  
        <br/>    
        <input type="submit" class="btn btn-info" id="CrearRegistro"   value="CrearRegistro" />
        </div>
</div>
        </form>
        </html>

输入小于最小数量的数量时,不进行任何验证。 当你输入字母接受它们时,只接受车辙中的数字。

1 个答案:

答案 0 :(得分:0)

您的验证功能中有一些缺失的括号,您也缺少submitHandler。请验证以下是一个工作示例。希望这有帮助。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>    
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>  
  <script type="text/javascript">
  $(document).ready(function() {
        $('#createPersonForm').validate({
        rules: {
        rut: {
        required: true,
        number: true,
        minlength:7
        },
        nombre:{
        required: true,
        minlength:3
        },
        apellido:{
        required: true,
        minlength:4
        },
        submitHandler: function(form) {
          form.submit();
        } 
      }
    });
});

</script>  
</head>
<body>
<form id="createPersonForm" action="crearPersona.do" method="post">
        <div class="navbar navbar-fixed-center">
        <table>
        <tr><td>Rut:</td><td><input type="text" id="rut" name="rut"    required/><span id="dato1"></span></td></tr>

        <tr><td>Nombre:</td><td><input type="text" id="nombre" name="nombre" required/><span id="dato2"></span></td></tr>

        <tr><td>Apellidos:</td><td><input type="text" id="apellido" name="apellido" required/><span id="dato3"></span></td></tr>

        </table>
        <div class="navbar-inner">  
        <br/>    
        <input type="submit" class="btn btn-info" id="CrearRegistro"   value="CrearRegistro" />
        </div>
</div>
        </form>
</body>
</html>