html 来自http：// localhost：8080/meiyao/user/register/confirmPrompt/[e-mail]

Posted 2021-05-11

<script type="text/javascript">
	$( document ).ready( function () {
		var validator = $("#registerForm").validate({
			onkeyup:false,
			rules:{
				email: {
					required: true,
					email: true,
					maxlength: 50,
					remote:{
						url:"user/register/validateEmailAvailable",
						type:"post",
						dataType:"json",
						data:{
							username:function(){
								return $("#email").val();
							}
						}
					}
				},
				password: {
					required: true,
					minlength: 6,
					maxlength: 40
				},
				confirm_password: {
					required: true,
					minlength: 6,
					maxlength: 40,
					equalTo: "#password"
				},
				agree:{
					required: true
				}
			},
			messages:{
				email: {
					required:"请输入注册邮箱",
					email:"请输入可用的邮件地址",
					maxlength:"您的用户名至多包含50个字符",
					remote:"该邮箱已被注册"
				},
				password: {
					required: "请输入密码",
					minlength: "您的密码需要至少包含6个字符",
					maxlength: "您的密码至多包含40个字符"
				},
				confirm_password: {
					required: "请输入密码",
					minlength: "您的密码需要至少包含6个字符",
					maxlength: "您的密码至多包含40个字符",
					equalTo: "两次输入的密码不一致"
				},
				agree: {
					required: "必须同意服务条款才能使用"
				}
			},
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				// Add the `help-block` class to the error element
				error.addClass( "help-block" );

				// Add `has-feedback` class to the parent div.form-group
				// in order to add icons to inputs
				element.parents( ".col-sm-5" ).addClass( "has-feedback" );

				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.parent( "label" ) );
				} else {
					error.insertAfter( element );
				}

				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !element.next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
				}
			},
			success: function ( label, element ) {
				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !$( element ).next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
				}
			},
			highlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
			},
			unhighlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
			},
			submitHandler:function(form){
				$.ajax({
					type:"post",
			  		url:"user/register/handle",
			  		dataType:"json",
			  		async:true,
			  		data:$('#registerForm').serialize(),
			  		success:function(data, textStatus, jqXHR){
						if(data.status==true)
						{
							window.location.href = document.getElementsByTagName("base")[0].getAttribute("href") + data.info;
						}
						else
						{
							toastr.warning(data.info);
						}
					},
			  		error:function (XMLHttpRequest, textStatus, errorThrown) {	  			
			  			if(textStatus=="timeout"){
			  				toastr.warning("响应超时，请稍后重试");
			  			}else{
			  				toastr.warning("注册异常，请稍后重试");
			  			}
			  		},
			  		beforeSend:function(){
			  			$("#loading").show();	
			  		}
				}); 
			}

		});
		$("#reset").click(function(){
			$("#registerForm").find(".has-success").removeClass("has-success");
			$("#registerForm").find(".has-error").removeClass("has-error");
			$("#registerForm").find(".form-control-feedback").remove();
			validator.resetForm();
		});
		
	});
	</script>

<form id="registerForm" class="form-horizontal" action="user/register/handle" method="post">
						<div class="form-group">
							<lable for="email" class="col-sm-4 control-label">邮件地址</lable>
							<div class="col-sm-5">
								<input name="email" id="email"  class="form-control" type="text" placeholder="Email"/>
							</div>
						</div>
						
						<div class="form-group">
							<lable for="password" class="col-sm-4 control-label">密码</lable>
							<div class="col-sm-5">
								<input name="password" id="password" type="password" size="40" class="form-control" placeholder="Password"/>
							</div>
						</div>
						
						<div class="form-group">
							<lable for="confirm_password" class="col-sm-4 control-label">密码确认</lable>
							<div class="col-sm-5">
								<input name="confirm_password" id="confirm_password" type="password" size="40" class="form-control" placeholder="Password"/>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-4 col-sm-5">
								<div class="checkbox">
								     <label>
								          <input type="checkbox" name="agree" id="agree" checked="checked"> 我已阅读并同意遵守 <a href="terms" target="_black">服务条款</a>
								     </label>
								</div>
							</div>
						</div>	
						<div class="form-group">
						    <div class="col-sm-offset-4 col-sm-5">
						    	<button type="submit" class="btn btn-default">注册</button>
						    	<button type="reset" id="reset" class="btn btn-default">重置</button>
						    </div>
					  	</div>
					</form>
				</div>