<!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. loadView 和 viewDidLoad、viewDidunload 的区别

    loadView 和 viewDidLoad 是 iPhone 开发中肯定要用到的两个方法. 他们都可以用来在视图载入的时候初始化一些内容. 但是他们有什么区别呢? viewDidLoad 方法只有当 ...

  2. mysql varchar类型转换int类型

    select * from gyzd_yysinfo order by cast(yysid as SIGNED INTEGER) 或者 select * from gyzd_yysinfo orde ...

  3. linux服务器中Apache隐藏index.php失败

    可以通过URL重写隐藏应用的入口文件index.php,下面是相关服务器的配置参考: [Apache] httpd.conf配置文件中加载了mod_rewrite.so模块 AllowOverride ...

  4. python 数值计算库

    pip install numpy pip install matplotlib pip install sklearn yum -y install tkinter pip install scip ...

  5. SaltStack 的插件特性

    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...

  6. SmartGit过期后破解方法

    根据自己的操作系统,进入相应的文件夹 ,可能还有一个版本号的文件夹,再进入 Windows: %APPDATA%\syntevo\SmartGit\OS X: ~/Library/Preference ...

  7. Ant学习--简单实例入门

    步骤1.创建工程文件夹名字 F:\Helloworld 步骤2.编写java代码: package com.netease; public class Ant_test { public static ...

  8. 【codeforces 1025E】Colored Cubes 【构造】

    题意 有一个n*n的棋盘和m个棋子,每个棋子有一个初始位置和一个目标位置,每次移动只能选择一个棋子移动到他相邻的格子,并且花费一秒钟.请你找出一个移动的方法,使得在10800步内将所有棋子移动到目标位 ...

  9. shell编程之sed语法

    首先插播条广告:  想要进一个文件夹去 看下面有那些文件 必须对这个文件夹有执行权限. sed p  打印对应的行  2p 打印第二行. -n  只输出经过sed 命令处理的行 看图吧 不太会擅长言语 ...

  10. Python操作SQLServer示例

    本文主要是Python操作SQLServer示例,包括执行查询及更新操作(写入中文). 需要注意的是:读取数据的时候需要decode('utf-8'),写数据的时候需要encode('utf-8'), ...