<!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. Setup Apache2 in Debian 9 and enable two ports for two sites

    root@debian:~# apt-get install apache2 root@debian:~# cd /etc/apache2/ root@debian:/etc/apache2# ls ...

  2. 游戏动作师使用Unity3D遇到过的所有问题

    http://blog.csdn.net/onafioo/article/details/50865169 http://www.gameres.com/thread_480489.html 文/拉撒 ...

  3. PHP微信授权登录信息

    文件1:index.php //换成自己的接口信息 $appid = 'XXXXX'; header('location:https://open.weixin.qq.com/connect/oaut ...

  4. distributed lock manager (DLM)(分布式管理锁)

    A distributed lock manager (DLM) provides distributed software applications with a means to synchron ...

  5. Python使用struct处理二进制(pack和unpack用法)

    转载自:http://www.cnblogs.com/gala/archive/2011/09/22/2184801.html 这篇文章写的很好,所以无耻的转了.. 有的时候需要用python处理二进 ...

  6. oo原则

    基本原则: 封装变化Encapsulate what varies. 面向接口编程而非实现 Code to an interface rather than to an implementation. ...

  7. windows下怎么安装protobuf for python

    首先从google上下载protobuf-3.0.0.zip和protoc-3.0.0-win32.zip,然后把protoc-3.0.0-win32.zip里的protoc.exe放到protobu ...

  8. Python爬虫实战二之爬取百度贴吧帖子

    大家好,上次我们实验了爬取了糗事百科的段子,那么这次我们来尝试一下爬取百度贴吧的帖子.与上一篇不同的是,这次我们需要用到文件的相关操作. 前言 亲爱的们,教程比较旧了,百度贴吧页面可能改版,可能代码不 ...

  9. 一张图让你看懂HDMI针脚定义

    一张图让你看懂HDMI针脚定义 摘自:http://www.hdmiaoc.com/cjwt-175.html 什么是HDMI线,HDMI插头的每根PIN脚是什么意思? 大部分使用HDMI标准的研发及 ...

  10. HTML的DOM树结构

    在面试连续跪了两轮后,我觉得两个月的前端白学了.主要的原因是学而不思,知识是零散的,并没有组织起来.于是,我决定从今天起,复习并总结一下前端的知识点. 一般的网页浏览者看到的是网页的整体外观,前端开发 ...