zoukankan      html  css  js  c++  java
  • form表单提交校验

    <form id="myForm" action="http://www.365mini.com" method="post">
        <input id="name" name="name" type="text" value="CodePlayer" /><br>
        <input id="age" name="age" type="text" value="" /><br>
        <input type="submit" value="提交" />
    </form>
    <div id="msg"></div>
    $("form").submit( function(event){
        if( !$("#name").val() ){
            alert("姓名不能为空!");
            return false; // 返回值为false,将阻止表单提交
        }else if( !$("#age").val() ){
            alert("年龄不能为空!");
            return false; // 返回值为false,将阻止表单提交
        }
    } );

    function check(s) {
    return (s == null || typeof (s) == "undefined" || s == "");
    }

    
    

    //去掉前后空格
    function trim(s) {
    return s.replace(/(^s*)|(s*$)/g, "");
    }

     

    提交表单之前校验,要先引入jquery



    <form action="login.do" method="post" id="myform">
                        <fieldset>
                            <div class="form-group">
                                <input type="text" placeholder="用户名" name="loginName"
                                    id="loginName"> 
                            </div>
                            <div class="form-group">
                                <input type="password" placeholder="密码" name="loginPassword"
                                    id="loginPassword">
                            </div>
                            <button type="submit" id="submit">登录</button>
                        </fieldset>
                    </form>
    $("#submit").click(function() {
                //    alert(111133);
                //$("#myform").submit();
                var userName = $("#loginName").val();
                var passWord = $("#loginPassword").val();
                if (check($.trim(userName))) {
                    alert("请输入用户名");
                    return false;
                }
                if (check($.trim(passWord))) {
                    alert("请输入密码");
                    return false;
                }
                return true;
            })
  • 相关阅读:
    js、css等文件引入空白问题
    Vue 组件 data为什么是函数
    安装Node,创建vue项目,运行及打包
    JQuery移除事件
    百度地图定位
    移动端导航过多,点击导航左右滚动回弹
    移动端开发模板
    移动端左右滑动导航
    使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局
    css实现三角箭头
  • 原文地址:https://www.cnblogs.com/dashuai01/p/5108980.html
Copyright © 2011-2022 走看看