H5完成用户注册自动校验的实例详解
- Y2J原创
- 2017-05-24 13:27:072514浏览
抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。
以下是效果截图：
1.页面代码：usersRegister.hbs
>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>用户注册title>
<div class="main" >
<div style="height：5px;text-align:center;font-size:25px"> 欢迎您注册！div>
<form id="my-form" class="myform">
<div>
<label>用户名:label><input id="username" name="username" type="text" />
div>
<div>
<label>密码:label><input id="pass" name="password" type="text" />
div>
<div>
<label>邮箱:label><input id="email" name="email"
data-ideal="required email" type="email" />
div>
<div>
<label>电话:label><input id="telephone" type="text" name="phone" data-ideal="phone" />
div>
<div>
<label>供应商V码:label><input id="vCode" type="text" name="vCode" data-ideal="vCode" />
div>
<div>
<label>真实姓名:label><input id="trueName" type="text" name="trueName" data-ideal="trueName" />
div>
<div>
<label>手机验证码:label><input id="telCode" type="text" name="telCode" data-ideal="telCode" />
div>
<div style="margin-bottom:5px;">
<button id="getTelCode" type="button" style="margin-left:160px; margin-right:auto;" >获取手机校验码button>
<hr style="margin-top:5px; margin-bottom:5px;" />
div>
div>
<script type="text/javascript">
var options = {
onFail : function() {
alert($myform.getInvalid().length + ' invalid fields.')
},
inputs : {
'password' : {
filters : 'required pass'
},
'username' : {
filters : 'required username'
},
'email' : {
filters : 'required email'
},
'phone' : {
filters : 'required phone'
},
'trueName' : {
filters : 'required'
},
'vCode' : {
filters : 'required'
},
'telCode' : {
filters : 'required'
}
/*
'age' : {
filters : 'required digits',
data : {
min : 16,
max : 70
}
},
'file' : {
filters : 'extension',
data : {
extension : [ 'jpg' ]
}
},
'comments' : {
filters : 'min max',
data : {
min : 50,
max : 200
}
},
'states' : {
filters : 'exclude',
data : {
exclude : [ 'default' ]
},
errors : {
exclude : '选择国籍.'
}
},
'langs[]' : {
filters : 'min max',
data : {
min : 2,
max : 3
},
errors : {
min : 'Check at least <strong>2strong> options.',
max : 'No more than <strong>3strong> options allowed.'
}
}
*/
}
};
$('#getTelCode').click(function() {
var telephone = document.getElementById("telephone").value; //手机号码
if (telephone == null || telephone == ""){
alert("手机号码不能为空!");
}
else{
$.ajax({
type : "GET",
dataType : "json",
url : "../api/getTelCode?telephone="+ telephone,
success : function(msg) {
},
error : function(e) {
alert("获取手机校验码失败！" + e);
}
});
}
});
var $myform = $('#my-form').idealforms(options).data('idealforms');
$('#submit').click(function() {
var username = document.getElementById("username").value; //用户名
var password = document.getElementById("pass").value; //密码
var email = document.getElementById("email").value; //邮箱
var telephone = document.getElementById("telephone").value; //手机号码
var vCode = document.getElementById("vCode").value; //公司V码
var telCode = document.getElementById("telCode").value; //手机校验码
var trueName = document.getElementById("trueName").value; //真实姓名
$.ajax({
type : "GET",
url : "../api/usersRegister?username="+ username +"password="+ password +"email="+ email +"telephone="+ telephone +"vCode="+ vCode +"telCode="+ telCode +"trueName="+ trueName,
success : function(msg) {
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath = window.document.location.href;
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8083
var localhostPaht = curWwwPath.substring(0, pos);
//获取带"/"的项目名，如：/uimcardprj
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
window.location.href = projectName + "/login";
alert("注册成功!");
},
error : function(e) {
alert("注册失败！" + e);
}
});
});
$('#reset').click(function() {
$myform.reset().fresh().focusFirst();
});
script>
body>
html>
2.jq输入校验：jquery.idealforms.js
该js校验初始版本来自Cedric Ruiz，我略有修改。
部分校验的规则如下：
required: '此处是必填的.'
number: '必须是数字.',
digits: '必须是唯一的数字.'
name: '必须至少有3个字符长，并且只能包含字母.'
username: '用户名最短5位,最长30位,请使用英文字母、数字、中文和下划线. 用户名首字符必须为字母、数字、中文,不能为全数字.中文最长21个字.'
pass: '密码的位数必须的在6-15位之间，并且至少包含一个数字，一个大写字母和一个小写字母.'
strongpass: '必须至少为8个字符长，至少包含一个大写字母和一个小写字母和一个数字或特殊字符.'
email: '必须是一个有效的email地址. (例: user@gmail.com)'
phone: '必须是一个有效的手机号码. (例: 18723101212)'
以下是整个代码文件：
/*--------------------------------------------------------------------------
jq-idealforms 2.1
* Author: Cedric Ruiz
* License: GPL or MIT
* Demo: http://elclanrs.github.com/jq-idealforms/
*
--------------------------------------------------------------------------*/
;(function ( $, window, document, undefined ) {
'use strict';
// Global Ideal Forms namespace
$.idealforms = {}
$.idealforms.filters = {}
$.idealforms.errors = {}
$.idealforms.flags = {}
$.idealforms.ajaxRequests = {}
/*--------------------------------------------------------------------------*/
/**
* @namespace A chest for various Utils
*/
var Utils = {
/**
* Get width of widest element in the collection.
* @memberOf Utils
* @param {jQuery object} $elms
* @returns {number}
*/
getMaxWidth: function( $elms ) {
var maxWidth = 0
$elms.each(function() {
var width = $(this).outerWidth()
if ( width > maxWidth ) {
maxWidth = width
}
})
return maxWidth
},
/**
* Hacky way of getting LESS variables
* @memberOf Utils
* @param {string} name The name of the LESS class.
* @param {string} prop The css property where the data is stored.
* @returns {number, string}
*/
getLessVar: function( name, prop ) {
var value = $('<p class="' + name + '">p>').hide().appendTo('body').css( prop )
$('.' + name).remove()
return ( /^\d+/.test( value ) ? parseInt( value, 10 ) : value )
},
/**
* Like ES5 Object.keys
*/
getKeys: function( obj ) {
var keys = []
for(var key in obj) {
if ( obj.hasOwnProperty( key ) ) {
keys.push( key )
}
}
return keys
},
// Get lenght of an object
getObjSize: function( obj ) {
var size = 0, key;
for ( key in obj ) {
if ( obj.hasOwnProperty( key ) ) {
size++;
}
}
return size;
},
isFunction: function( obj ) {
return typeof obj === nbsp;'function'
},
isRegex: function( obj ) {
return obj instanceof RegExp
},
isString: function( obj ) {
return typeof obj === 'string'
},
getByNameOrId: function( str ) {
var $el = $('[name="'+ str +'"]').length
? $('[name="'+ str +'"]') // by name
: $('#'+ str) // by id
return $el.length
? $el
: $.error('The field "'+ str + '" doesn\'t exist.')
},
getFieldsFromArray: function( fields ) {
var f = []
for ( var i = 0, l = fields.length; i < l; i++ ) {
f.push( Utils.getByNameOrId( fields[i] ).get(0) )
}
return $( f )
},
convertToArray: function( obj ) {
return Object.prototype.toString.call( obj ) === '[object Array]'
? obj : [ obj ]
},
/**
* Determine type of any Ideal Forms element
* @param $input jQuery $input object
*/
getIdealType: function( $el ) {
var type = $el.attr('type') || $el[0].tagName.toLowerCase()
return (
/(text|password|email|number|search|url|tel|textarea)/.test( type ) && 'text' ||
/file/.test( type ) && 'file' ||
/select/.test( type ) && 'select' ||
/(radio|checkbox)/.test( type ) && 'radiocheck' ||
/(button|submit|reset)/.test( type ) && 'button' ||
/h\d/.test( type ) && 'heading' ||
/hr/.test( type ) && 'separator' ||
/hidden/.test( type ) && 'hidden'
)
},
/**
* Generates an input
* @param name `name` attribute of the input
* @param type `type` or `tagName` of the input
*/
makeInput: function( name, value, type, list, placeholder ) {
var markup, items = [], item, i, len
function splitValue( str ) {
var item, value, arr
if ( /::/.test( str ) ) {
arr = str.split('::')
item = arr[ 0 ]
value = arr[ 1 ]
} else {
item = value = str
}
return { item: item, value: value }
}
// Text & file
if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )
markup = '+
'type="'+ type +'" '+
'id="'+ name +'" '+
'name="'+ name +'" '+
'value="'+ value +'" '+
(placeholder && 'placeholder="'+ placeholder +'"') +
'/>'
// Textarea
if ( /textarea/.test( type ) ) {
markup = '