js带提示登录表单验证代码下载,含验证码的登录界面js

本文目录一览:

js验证表单

avaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?

用户输入的邮件地址是否合法?

用户是否已输入合法的日期?

用户是否在数据域 (numeric field) 中输入了文本?

必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value==””)

 {alert(alerttxt);return false}

else {return true}

}

}

下面是连同 HTML 表单的代码:

html

head

script type=”text/javascript”function validate_required(field,alerttxt)

{

with (field)

 {

 if (value==null||value==””)

   {alert(alerttxt);return false}

 else {return true}

 }

}

function validate_form(thisform)

{

with (thisform)

 {

 if (validate_required(email,”Email must be filled out!”)==false)

   {email.focus();return false}

 }

}/script

/head

body

form action=”submitpage.htm” onsubmit=”return validate_form(this)” method=”post”

Email: input type=”text” name=”email” size=”30″

input type=”submit” value=”Submit”

/form

/body

/html

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf(“@”)

dotpos=value.lastIndexOf(“.”)

if (apos1||dotpos-apos2)

 {alert(alerttxt);return false}

else {return true}

}

}

下面是连同 HTML 表单的完整代码:

html

head

script type=”text/javascript”function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf(“@”)

dotpos=value.lastIndexOf(“.”)

if (apos1||dotpos-apos2)

 {alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_email(email,”Not a valid e-mail address!”)==false)

 {email.focus();return false}

}

}/script

/head

body

form action=”submitpage.htm”onsubmit=”return validate_form(this);” method=”post”

Email: input type=”text” name=”email” size=”30″

input type=”submit” value=”Submit”

/form

/body

/html

js注册表单验证代码

JS函数:

function check(){

    var username = document.getElementById(“username”).value;

    var pass1 = document.getElementById(“password”).value;

    var pass2 = document.getElementById(“confirm_password”).value;

 

    if (username == “”|| username == NULL || pass1 == “” || pass1 == NULL || pass2 == NULL || pass2 == “”) {

        alert(“用户名或密码不得为空!”);

        return false;

    }

}

表单提交的时候验证:

input name=”reg” type=”submit”  value=”提交” onclick=”return check()”/

自己补全。

JS表单验证代码

我就简单的写个 希望可以帮助您

==================================

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

title测试页面/title

script type=”text/javascript”

function checkform(){

//验证用户名

if($(“username”).value == “”){

$(“n_msg”).innerHTML =”用户名不可以为空”;

$(“username”).select();

$(“username”).focus();

return false;

}else{

if($(“username”).value.length 6){

$(“n_msg”).innerHTML = “用户名必须大于6个字符”;

$(“username”).select();

$(“username”).focus();

return false;

}

}

//验证密码

if($(“password”).value == “”){

$(“p_msg”).innerHTML =”密码不可以为空”;

$(“password”).select();

$(“password”).focus();

return false;

}else{

if($(“password”).value.length 10){

$(“p_msg”).innerHTML = “密码必须大于10个字符”;

$(“password”).select();

$(“password”).focus();

return false;

}

}

//…..(下面的可以以此类推)

return true;

}

function $(id){

return document.getElementById(id);

}

/script

style type=”text/css”

body{ font:12px 宋体}

.c_red{ color:#f00}

/style

/head

body

table width=”500″ border=”0″ cellspacing=”0″ cellpadding=”0″

form method=”post” onsubmit=”return checkform()”

tr

td width=”89″用户名/td

td width=”223″input name=”username” type=”text” id=”username” //td

td width=”188″ id=”n_msg” class=”c_red”/td

/tr

tr

td密码/td

tdinput name=”password” type=”password” id=”password” //td

td id=”p_msg” class=”c_red”/td

/tr

tr

td colspan=”3″input name=”sub” type=”submit” id=”sub” value=”提交” //td

/tr

/form

/table

/body

/html

===========================

上面的为代码部分 我已经调试没问题 希望可以帮助您

祝早日解决~

求javascript表单验证大全

JavaScript验证表单大全

script

/*

用途:校验ip地址的格式

输入:strIP:ip地址

返回:如果通过验证返回true,否则返回false;

*/

function isIP(strIP) {

if (isNull(strIP)) return false;

var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式

if(re.test(strIP))

{

if( RegExp.$1 256 RegExp.$2256 RegExp.$3256 RegExp.$4256) return true;

}

return false;

}

/*

用途:检查输入字符串是否为空或者全部都是空格

输入:str

返回:

如果全是空返回true,否则返回false

*/

function isNull( str ){

if ( str == “” ) return true;

var regu = “^[ ]+$”;

var re = new RegExp(regu);

return re.test(str);

}

/*

用途:检查输入对象的值是否符合整数格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function isInteger( str ){

var regu = /^[-]{0,1}[0-9]{1,}$/;

return regu.test(str);

}

/*

用途:检查输入手机号码是否正确

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/

function checkMobile( s ){

var regu =/^[1][3][0-9]{9}$/;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

}else{

return false;

}

}

/*

用途:检查输入字符串是否符合正整数格式

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/

function isNumber( s ){

var regu = “^[0-9]+$”;

var re = new RegExp(regu);

if (s.search(re) != -1) {

return true;

} else {

return false;

}

}

/*

用途:检查输入字符串是否是带小数的数字格式,可以是负数

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/

function isDecimal( str ){

if(isInteger(str)) return true;

var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;

if (re.test(str)) {

if(RegExp.$1==0RegExp.$2==0) return false;

return true;

} else {

return false;

}

}

/*

用途:检查输入对象的值是否符合端口号格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function isPort( str ){

return (isNumber(str) str65536);

}

/*

用途:检查输入对象的值是否符合E-Mail格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function isEmail( str ){

var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;

if(myReg.test(str)) return true;

return false;

}

/*

用途:检查输入字符串是否符合金额格式

格式定义为带小数的正数,小数点后最多三位

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/

function isMoney( s ){

var regu = “^[0-9]+[\.][0-9]{0,3}$”;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

} else {

return false;

}

}

/*

用途:检查输入字符串是否只由英文字母和数字和下划线组成

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/

function isNumberOr_Letter( s ){//判断是否是数字或字母

var regu = “^[0-9a-zA-Z\_]+$”;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

}else{

return false;

}

}

/*

用途:检查输入字符串是否只由英文字母和数字组成

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/

function isNumberOrLetter( s ){//判断是否是数字或字母

var regu = “^[0-9a-zA-Z]+$”;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

}else{

return false;

}

}

/*

用途:检查输入字符串是否只由汉字、字母、数字组成

输入:

value:字符串

返回:

如果通过验证返回true,否则返回false

*/

function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成

var regu = “^[0-9a-zA-Z\u4e00-\u9fa5]+$”;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

}else{

return false;

}

}

/*

用途:判断是否是日期

输入:date:日期;fmt:日期格式

返回:如果通过验证返回true,否则返回false

*/

function isDate( date, fmt ) {

if (fmt==null) fmt=”yyyyMMdd”;

var yIndex = fmt.indexOf(“yyyy”);

if(yIndex==-1) return false;

var year = date.substring(yIndex,yIndex+4);

var mIndex = fmt.indexOf(“MM”);

if(mIndex==-1) return false;

var month = date.substring(mIndex,mIndex+2);

var dIndex = fmt.indexOf(“dd”);

if(dIndex==-1) return false;

var day = date.substring(dIndex,dIndex+2);

if(!isNumber(year)||year”2100″ || year “1900”) return false;

if(!isNumber(month)||month”12″ || month “01”) return false;

if(daygetMaxDay(year,month) || day “01”) return false;

return true;

}

function getMaxDay(year,month) {

if(month==4||month==6||month==9||month==11)

return “30”;

if(month==2)

if(year%4==0year%100!=0 || year%400==0)

return “29”;

else

return “28”;

return “31”;

}

/*

用途:字符1是否以字符串2结束

输入:str1:字符串;str2:被包含的字符串

返回:如果通过验证返回true,否则返回false

*/

function isLastMatch(str1,str2)

{

var index = str1.lastIndexOf(str2);

if(str1.length==index+str2.length) return true;

return false;

}

/*

用途:字符1是否以字符串2开始

输入:str1:字符串;str2:被包含的字符串

返回:如果通过验证返回true,否则返回false

*/

function isFirstMatch(str1,str2)

{

var index = str1.indexOf(str2);

if(index==0) return true;

return false;

}

/*

用途:字符1是包含字符串2

输入:str1:字符串;str2:被包含的字符串

返回:如果通过验证返回true,否则返回false

*/

function isMatch(str1,str2)

{

var index = str1.indexOf(str2);

if(index==-1) return false;

return true;

}

/*

用途:检查输入的起止日期是否正确,规则为两个日期的格式正确,

且结束如期=起始日期

输入:

startDate:起始日期,字符串

endDate:结束如期,字符串

返回:

如果通过验证返回true,否则返回false

*/

function checkTwoDate( startDate,endDate ) {

if( !isDate(startDate) ) {

alert(“起始日期不正确!”);

return false;

} else if( !isDate(endDate) ) {

alert(“终止日期不正确!”);

return false;

} else if( startDate endDate ) {

alert(“起始日期不能大于终止日期!”);

return false;

}

return true;

}

/*

用途:检查输入的Email信箱格式是否正确

输入:

strEmail:字符串

返回:

如果通过验证返回true,否则返回false

*/

function checkEmail(strEmail) {

//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;

var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

if( emailReg.test(strEmail) ){

return true;

}else{

alert(“您输入的Email地址格式不正确!”);

return false;

}

}

/*

用途:检查输入的电话号码格式是否正确

输入:

strPhone:字符串

返回:

如果通过验证返回true,否则返回false

*/

function checkPhone( strPhone ) {

var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;

var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;

var prompt = “您输入的电话号码不正确!”

if( strPhone.length 9 ) {

if( phoneRegWithArea.test(strPhone) ){

return true;

}else{

alert( prompt );

return false;

}

}else{

if( phoneRegNoArea.test( strPhone ) ){

return true;

}else{

alert( prompt );

return false;

}

}

}

/script

form name=a onsubmit=”return checkPhone(document.a.b.value);”

INPUT TYPE=”text” NAME=”b”

input type=”submit” name=”Submit” value=”check”

/form

原创文章,作者:小蓝,如若转载,请注明出处:https://www.506064.com/n/254633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝的头像小蓝
上一篇 2024-12-15 12:12
下一篇 2024-12-15 12:12

相关推荐

  • 如何解决WPS保存提示会导致宏不可用的问题

    如果您使用过WPS,可能会碰到在保存的时候提示“文件中含有宏,保存将导致宏不可用”的问题。这个问题是因为WPS在默认情况下不允许保存带有宏的文件,为了解决这个问题,本篇文章将从多个…

    编程 2025-04-29
  • 如何使用Python将print输出到界面?

    在Python中,print是最常用的调试技巧之一。在编写代码时,您可能需要在屏幕上输出一些值、字符串或结果,以便您可以更好地理解并调试代码。因此,在Python中将print输出…

    编程 2025-04-29
  • 金融阅读器提示配置文件无法识别

    在使用金融阅读器过程中,有时会遇到提示配置文件无法识别的情况。这种情况通常是由于配置文件中存在错误或不完整所导致的。本文将从多个方面对此问题进行详细的阐述,并提供相应解决方法。 一…

    编程 2025-04-28
  • Java表单提交方式

    Java表单提交有两种方式,分别是get和post。下面我们将从以下几个方面详细阐述这两种方式。 一、get方式 1、什么是get方式 在get方式下,表单的数据会以查询字符串的形…

    编程 2025-04-27
  • Python 如何进入编程界面?

    Python 是一种广泛应用于 Web、游戏、网络爬虫等领域的高级编程语言。Python 虽然易学易用,但还是需要一些工具和步骤来实际编写运行程序。 一、命令行模式 在命令行模式下…

    编程 2025-04-27
  • 从多个方面详细阐述JS提示框

    一、提示框的作用 JS提示框(即弹出框)是Web开发中经常用到的一种界面元素,通常用于提示用户进行某些操作或者告知用户当前的状态。 使用提示框可以让用户更加易于理解,且提升用户体验…

    编程 2025-04-25
  • 全方位解析fomer——无需编写HTML表单的前端库

    一、什么是fomer? fomer是一个基于React的前端库,可以方便地创建表单。使用它,你不需要编写HTML表单,只需要使用JavaScript以及一些CSS类名即可创建美丽的…

    编程 2025-04-25
  • Python GUI界面详解

    Graphical User Interface (GUI) 即图形用户界面,为用户提供了更加方便直观的操作形式,已经是现代软件的标配。作为一名全能编程开发工程师,掌握Python…

    编程 2025-04-23
  • 深入浅出:volidate表单验证库详解

    表单验证是Web开发中很重要的一部分,不仅能帮助我们轻松验证所需要的输入数据、保证数据的完整性和一致性,还能够给用户带来更好的体验。而volidate则是一款方便易用的表单验证库,…

    编程 2025-04-23
  • Idea代码提示设置

    一、设置基础提示 在进行代码输入的时候,Idea能够根据之前输入的内容进行基础提示,这需要设置一些基础的配置。 1、设置Java的基础提示:在Idea的设置菜单中找到Editor …

    编程 2025-04-23

发表回复

登录后才能评论