文档章节

jquery验证不为空 电子邮箱格式是否正确

管温饱的老徐
 管温饱的老徐
发布于 2017/07/23 19:29
字数 481
阅读 2
收藏 0
点赞 0
评论 0

   

Jquery代码如下:

<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    function checkForm() {
        //jQuery取得用户输入的name,age,email值  
        var name = $("#clientname").val();
        var pass = $("#password").val();
        var reg = /\w+[@]{1}\w+[.]\w+/;
        var email = $("#email").val();

        //如果名字为空  
        if (name == "") {
            //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
            $(".name_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#clientname").after(
                    "<label class='name_lable'><font>用户名不能为空</font></label>");

        } else {
            //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
            $(".name_lable").empty();
        }
        if (pass == "") {
            //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
            $(".password_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#password")
                    .after(
                            "<label class='password_lable'><font>密码不能为空</font></label>");
        } else {
            //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
            $(".password_lable").empty();
        }
        
        if (reg.test(email)) {
        } else {
            $(".email_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#email").after(
                    "<label class='email_lable'><font>email格式不正确</font></label>");
                    return false;
        }

    }
</script>

页面代码如下:

<form name="client_form" action="insert.action" method="get"
        onsubmit="return checkForm()">
        <table>

            <tr bgcolor="#f5f5f5">
                <td><div>
                        <font>*</font> 姓名:
                    </div></td>
                <td><input id="clientname" type="text" name="username" value=""
                    size="30"></td>

            </tr>

            <tr bgcolor="#f5f5f5">
                <td><div>
                        <font>*</font>密码
                    </div></td>
                <td><input type="text" name="password" value="" size="30"
                    id="password"></td>
            </tr>
            <tr bgcolor="#f5f5f5">
                <td><div>电子邮箱</div></td>
                <td><input type="text" name="email" value="" size="30"
                    id="email"></td>
            </tr>
            <tr bgcolor="#f0f0f0">
                <td></td>
                <td colspan="2"><input type="submit" value="提交"> <input
                    type="reset" value="重置"></td>
            </tr>
        </table>
    </form>

    <table>
        <tr bgcolor="#f5f5f5">
            <td bgcolor="#FFFFFF"><em>注意:名称前有*的为必填项</em></td>
        </tr>
    </table>

 

css代码如下:

 

<title>添加客户</title>
<style type="text/css">
table {
    background-color: #CCCCCC;
    border: 1px;
    width: 100%;
}

table tr {
    height: 20px;
}

table tr div {
    text-align: right;
}

td font {
    color: red;
}
</style>

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
管温饱的老徐
粉丝 0
博文 10
码字总数 1678
作品 0
呼伦贝尔
简单好用的表单校验插件——jQuery Validate基本使用方法总结

jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0 1.基本用法 从字面就知道既然是jquery的插件,首先得引入...

Gaia_bing
今天
0
0
jquery验证手机号码、邮箱格式是否正确示例代码

//jquery验证邮箱 function checkSubmitEmail() { if ($("#email").val() == ""){ //$("#confirmMsg").html("<font color='red'>邮箱地址不能为空!</font>"); alert("邮箱不能为空!") $("#e......

易水寒丶开源
2015/11/02
0
0
Struts2 整合jQuery实现Ajax功能

Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。 首先明确个概念: jQuery是什么:是...

孙斐
2011/10/12
0
2
学习zepto.js(Hello World)

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名D...

贾顺名
2015/08/07
0
0
jQuery.Validate客户端验证使用介绍

在日常项目中表单验证算是最常见的了,使用一个好的js库可以使我们的工作事半功倍。jQuery.Validate无疑就是一个不错的选择。 jQuery.Validate,这个验证库是属于jQuery的插件,是由bassist...

Edens_Song
2012/09/17
0
0
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
50个必备的实用jQuery代码段(1)

本文会给你们展示50个jquery代码片段,这些代码能够给 你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你 又...

postdep
2014/02/19
0
0
[jQuery] 关于jQuery的AJAX不兼容IE的解决办法

在使用jQuery的AJAX:get方法去检测数据是否存在时,会发现IE会出现不兼容的情况。 用AJAX:post方法时,使用Chrome/FireFox/IE均能出现正确的结果,但是在使用AJAX:get方法时,IE却不能返回正...

zhengguogaun
2013/06/19
0
0
50个必备的实用jQuery代码段.

如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}}); 2. 解决jQuery, prototype共存......

被风遗忘
2012/04/28
0
14
Jquery中AJAX参数详细介绍

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, ...

凯文加内特
2015/01/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(五)交换机Exchange-fanout

之前学习的都是一条消息发给一个消费者,下面开始记录如何把一条信息发给多个消费者 这边我们用到了交换机Exchange 交换机模式:fanout 模式特点:生产者把消息发送给Exchange之后,Exchang...

人觉非常君
23分钟前
0
0
sqoop导入数据到Base并同步hive与impala

使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟 基础环境 Sqool和Hive、HBase简介 Sqoop Hive HBase 测试Sqoop 使用Sqoop从MySQL导入数据到Hive 使用复杂SQL 调整Hive数据类型 不断更新 ...

hblt-j
28分钟前
0
0
Dart 服务端开发 文件上传

clent端使用angular组件 upload_component.html form id="myForm" method="POST" enctype="multipart/form-data"> <input type="file" name="fileData"> <!-- file field --></form>......

scooplol
28分钟前
0
0
apache和tomcat同时开启,乱码问题

tomcat和apache同时开启,会走apache的转发,执行的是AJP/1.3协议。所以在tomcat的配置文件server中, <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" useBodyEncodingForU......

Kefy
45分钟前
0
0
使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录 和ssh常用命令

ssh-keygen 产生公钥与私钥对. ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized_keys的权利 第一步...

xtof
今天
0
0
orcale 查询表结构

SELECT t.table_name, t.colUMN_NAME, t.DATA_TYPE || '(' || t.DATA_LENGTH || ')', t1.COMMENTS FROM User_Tab_Cols t, User_Col_Comments t1WHERE t.table_name......

wertwang
今天
0
0
Java 之 反射

反射,剖析 Java类 中的 各个组成部分,映射成 一个个 Java对象,多用于 框架和组件,写出复用性高的通用程序。 测试类代码如下: class Person { private String name; public St...

绝世武神
今天
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
今天
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
今天
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部