zoukankan      html  css  js  c++  java
  • form表单ajaxSubmit提交并验证

    html:

    <form class="register-form" action="{:U('')}" method="post">
              <span class="error"></span>
                <div class="p"><input type="text" class="input_text user_name" placeholder="请输入通行证账号,6—16位字符" name="username"></div>
                <div class="p"><input type="password" class="input_text pass_word" placeholder="请设置6-16位密码,不区分大小写" name="password"></div>
                <div class="p">
                  <div class="unlock">
                      <div class="slideunlock" id="slideunlock">
                      <span class="unlock-btn" id="unlock-btn"></span><span class="tips">请按住滑块,拖至最右边</span>
                      </div>
                  </div>
                </div>
              
                <div class="p"><button type="submit" disabled>立即注册</button></div>
              </form>

    jquery:

    $(function(){
          /*js验证*/
          $(".register-form").resetForm();
          //注册表单验证
          $(".register-form").validate({
                rules :{
                    'username':{
                      required:true,
                      rangelength: [5,16],
                      isUserName:true,
                      remote:"{:U('')}"
                    },
                    password:{required:true,minlength:6,maxlength:18}
                },
                messages :{
                  'username':{required:"请输入用户名",rangelength:"用户名必须在5-16个字符之间",remote:"用户名被占用"},
                  password:{required:"请输入密码",minlength: "密码不能少于6个字符",maxlength: "密码不能大于18个字符"}
                },
                errorPlacement: function(error, element) {
                  //错误信息显示到最后面
                  $("span.error").html(error);
               },
               success: function(label) {
                  $("span.error").html("").removeClass("error");
               },
               submitHandler: function(form) {
                  $(form).ajaxSubmit({
                      type: 'post', // 提交方式 get/post
                      url:$(form).attr("action"),
                      success: function(data) {
                      // data 保存提交后返回的数据,一般为 json 数据
                          // 此处可对 data 作相关处理
                          //alert(data.status);
                          if(data.status){
                            alert(data.info);
                            $(form).resetForm();
                          } else {
                            alert(data.info);
                            $(form).resetForm();
                            //刷新验证码
                          }
                      }
                  });
                  $(form).resetForm(); // 提交后重置表单
                  return false;
                }
          });

    });

  • 相关阅读:
    JAVA的界面(Swing)
    openlayers优化项
    常用软件下载
    最全的微软msdn原版windows系统镜像和office下载地址集锦
    常用WinPE
    Friends(老友记)(六人行)相关资源
    SAP初级书籍(PM相关)
    第8天:javascriptDOM小 案例、onmouseover 、onmouseout
    第7天:javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等
    第6天:数据Array
  • 原文地址:https://www.cnblogs.com/qq350760546/p/5453854.html
Copyright © 2011-2022 走看看