Simple js form validation function
- 2020-03-26 21:44:38
- OfStack
The function of form validation is very common in web design.
Sometimes, it is convenient to use some formed js controls, but they are too large and difficult to maintain (my js level is not high).
So I wrote one myself. As for the good, flexible is not flexible, also ask for your advice (the first picture, very ugly, please don't mind) :
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/20131028104411.jpg? 2013928104557 ">
Foreground code (aspx page) :
Sometimes, it is convenient to use some formed js controls, but they are too large and difficult to maintain (my js level is not high).
So I wrote one myself. As for the good, flexible is not flexible, also ask for your advice (the first picture, very ugly, please don't mind) :
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/20131028104411.jpg? 2013928104557 ">
Code:
Form validation js code
var fv =
{
lang: "zh-cn", //Error language
inValidedStr: "=", //Initially copy at will so that its length is not 0
mail: function(elementID) //Verify that the email address is valid, and elementID is the ID of the input text input field
{
if (elementID == null) { return true; }
else
{
var reg = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
if (reg.test(document.getElementById(elementID).value))
{
fv.inValidedStr = fv.inValidedStr.replace(/mail/g, "");
fv.inValidedStr = fv.inValidedStr.replace("=", "");
validMsg(fv.lang, "mail", "mailInfo");
}
else
{
fv.inValidedStr = fv.inValidedStr + "mail";
errorMsg(fv.lang, "mail", "mailInfo");
}
}
},
username: function(elementID) //Verify that the user name is an alphanumeric underscore, 6-20 in length
{
if (elementID == null) { return true; }
else
{
var reg = /^[a-zA-Z0-9_]{5,19}$/;
if (reg.test(document.getElementById(elementID).value))
{
fv.inValidedStr = fv.inValidedStr.replace(/username/g, "");
fv.inValidedStr = fv.inValidedStr.replace("=", "");
validMsg(fv.lang, "username", "usernameInfo");
}
else
{
fv.inValidedStr = fv.inValidedStr + "username";
errorMsg(fv.lang, "username", "usernameInfo");
}
}
},
//. You can add additional validation
isValid: function() { return (fv.inValidedStr.length == 0); }
};
//When the validation succeeds, the information elementID is the id of the HTML unit prompted by the information
function validMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn";
switch (valueType)
{
case "mail":
msgInfo = isCn ? " Square root Address is correct " : " Square root the mail address is valided";
break;
case "username":
msgInfo = isCn ? " Square root successful " : " Square root The account valided ";
break;
case "password":
msgInfo = isCn ? " Square root successful " : " Square root Valided format!";
break;
//. I'm going to add other cases
default:
break;
}
document.getElementById(elementID).innerHTML = msgInfo;
document.getElementById(elementID).style.color = "green";
}
//Validation fails
function errorMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn";
switch (valueType)
{
case "mail":
msgInfo = isCn ? " x Please enter the correct email address " : " x The e-mail format is error,plz input right format .eg. abc@def.com.";
break;
case "username":
msgInfo = isCn ? " x The length of the 6-20 Character, can only be a number, letter, underscore composition " : " x The account just ";
break;
case "password":
msgInfo = isCn ? " x The password for... " : " x inValided format!";
break;
//. I'm going to add other cases
default:
break;
}
document.getElementById(elementID).innerHTML = msgInfo;
document.getElementById(elementID).style.color = "red";
}
Foreground code (aspx page) :
The front desk aspx Page code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">fv.lang = "en"</script>
<input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
<asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
<input type="submit" onclick="return fv.isValid()" value="Submit" />
</div>
</form>
</body>
</html>