<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="text" placeholder="请输入姓名(必须是汉字)" name="xingming" id="xingming" />

    <button id="btn">点击</button>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    //判断是否填写姓名

    $(function() {

        $("#btn").click(function() {

            // 第一种方法:

            if ($("#xingming").val() == '') {

                $("#xingming").trigger("focus");

                alert("请填写姓名！");

                return false;

            }

            // 第二种方法

            // if (document.getElementsByName("xingming")[0].value == "") {

            //     alert("请填写姓名！");

            // }

        });

    });

    </script>

</body>

</html>

效果图：

第二种：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form action="xm.php" method="post" onsubmit="return chkfrom_xm();">

        <div><span>男方姓名</span>

            <input type="text" name="xing1" class="input" id="xing1" />

        </div>

        <div><span>女方姓名</span>

            <input type="text" name="xing2" class="input" id="xing2" />

        </div>

        <button type="submit">点击提交</button>

    </form>

    <script type="text/javascript">

    function chkfrom_xm() {

        var xing1 = document.getElementById('xing1');

        var xing2 = document.getElementById('xing2');

        if (xing1.value == '') {

            alert('请输入男方姓名');

            return false;

        }

        if (xing2.value == '') {

            alert('请输入女方姓名');

            return false;

        }

        return true;

    }

    </script>

</body>

</html>

注意：这里要用submit。

效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin:0; padding: 0;}

        .btn{ background: #ddd; width: 100px; height: 30px; line-height: 30px; text-align: center; }

        /*.red_btn{ background: red; color: #fff; width: 100px; height: 30px; line-height: 30px; text-align: center; }*/

    </style>

</head>

<body>

    <form>

        <div>姓名：<input type="text" id="username" name="" placeholder="输入您的姓名"></div>

        <div>电话：<input type="text" id="phone" name="" placeholder="输入你的手机电话"></div>

        <input type="submit" name="" value="提交" id="btn" class="btn">

    </form>

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function sub(){

        // alert(1)

        var userName = $("#username");//姓名

        var phone = $("#phone");//手机号码

        var btn = $("#btn");//提交按钮

        btn.click(function(){

            //姓名

            var xm = userName.val();

            if(xm==""){

                alert("请输入姓名");

                return false;

            }

            //手机

            var sj = phone.val();

            if(sj==""){

                alert("请输入手机号码");

                return false;

            }

        });

    }

    sub();

</script>

</body>

</html>

效果图：

jQuery判断表单input的更多相关文章

  1. jquery判断表单提交是否为空

    <input type="text" value="" name="toPage"> 判断该表单是否为空 var p = $(& ...

  2. jquery判断表单内容是否为空

    //判断表单数据是否为空 var t = $('form').serializeArray(); $.each(t,function(i,item){ if(item['value'] == '') ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  5. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  6. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  7. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  8. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  9. jQuery实现表单验证

    表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...

随机推荐

  1. iOS布局之Auto Layout

    学习资源: <iOS6核心编程>自动布局部分 <iOS6范例经典>自动布局部分 Tutorial: iOS 6 Auto Layout versus Springs and S ...

  2. 索引(index)

    #创建索引 create index index_name_pass on student(name,pass); create index index_name_id on student(name ...

  3. 【BZOJ4566】找相同字符【后缀自动机】

    题意 给定两个字符串,求两个字符串相同子串的方案数. 分析 那么将字符串s1建SAM,然后对于s2的每个前缀,都在SAM中找出来,并且计数就行. 我一开始的做法是,建一个u和len,顺着s2跑SAM, ...

  4. 解剖Nginx·自动脚本篇（2）设置初始变量脚本 auto/init

    在configure中运行完auto/options脚本后,接着运行auto/init脚本,其中所做的工作如下. 1 Makefile文件名变量 默认情况下是: objs/Makefile 代码如下: ...

  5. windows编程之内核对象

          学好windows编程,理解内核对象还是至关重要的(●'◡'●).闲话不多说,下面先来了解一下关于内核对象的知识:       内核对象(kernel object):内核对象是用于管理进 ...

  6. Android有趣的全透明效果--Activity及Dialog的全透明(附android系统自带图标大全)[转]

    原文地址:http://blog.csdn.net/sodino/article/details/5822147 1.Activity全透明 同学zzm给了这个有趣的代码,现在公布出来. 先在res/ ...

  7. EZOJ #226

    传送门 分析 我们可以建一个k层图,把dp转移的三维对应到每个点上,每个第k层点连向0层点 我们让第0层点为实点其余为虚点,只要碰到虚点就dfs到他连得所有实点再将实点入队即可 代码 #include ...

  8. p2944 [USACO09MAR]地震损失2Earthquake Damage 2

    传送门 分析 我们让s到1,关键点到t分别连流量为inf的边 于是我们可以考虑跑s到t的最小割 于是我们将所有点拆为两个点,关键点和1的两个点之间连inf,其余点连1 将原图的边也连上,流量为inf ...

  9. 最小生成树 prim

    1．算法思想: 图采用邻接矩阵存储,贪心找到目前情况下能连上的权值最小的边的另一端点,加入之,直到所有的顶点加入完毕. 2．算法实现步骤: 设图G =(V,E),其生成树的顶点集合为U. (1)把v0 ...

  10. CentOS-yum基本使用

    CentOS: yum URL: ftp://172.16.0.1/pub/ YUM: yellow dog, Yellowdog Update Modifier yum repository: yu ...