2输入的设定模式是相等的

时间:2016-01-04 20:11:25

标签: html html5 pattern-matching

这是我的代码,如何添加Passwor和RepeatPasswor必须相同的模式?

<form>
			<div class="input-container">
				<input type="text" id="Usernam" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
				<label for="Usernam">Username</label>
				<div class="bar"></div>
			</div>
			<div class="input-container">
				<input type="password" id="Passwor" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
				<label for="Passwor">Password</label>
				<div class="bar"></div>
			</div>
			<div class="input-container">
				<input type="password" id="RepeatPasswor" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
				<label for="RepeatPasswor">Ripeti Password</label>
				<div class="bar"></div>
			</div>
			<div class="button-container">
				<button id="reg" type="button" ><span>Registrami</span></button>
			</div>
		</form>

1 个答案:

答案 0 :(得分:1)

它的HTML5验证。需要在后端脚本中检查字段

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>

<body>
<form action="/" method="post">
    <div class="input-container">
        <input type="text" id="Usernam" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
        <label for="Usernam">Username</label>
        <div class="bar"></div>
    </div>
    <div class="input-container">
        <input type="password" name="Passwor" id="Passwor" required="required" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : '');
                if (this.checkValidity())
                    form.RepeatPasswor.pattern = this.value;" title="Devi inserire almeno 4 caratteri"/>
        <label for="Passwor">Password</label>
        <div class="bar"></div>
    </div>
    <div class="input-container">
        <input type="password" name="RepeatPasswor" id="RepeatPasswor" required="required" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" title="Devi inserire almeno 4 caratteri"/>
        <label for="RepeatPasswor">Ripeti Password</label>
        <div class="bar"></div>
    </div>
    <div class="button-container">
        <button id="reg" type="submit" ><span>Registrami</span></button>
    </div>
</form>

</body>

</html>
&#13;
&#13;
&#13;