Question

我需要制作HTML5验证规则：

10个字符
字母和数字的混合
至少1个字母

我试着像：

<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="[a-fA-F]{1,}[0-9]{10}" title="Wrong Code" placeholder="Security Code" />

但不能工作。

Answer 1

您可以使用<input type="password" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" required>

或者这个（它有点长......）：

<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
  input {
			width: 100%;
			padding: 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
			margin-top: 6px;
			margin-bottom: 16px
		}
		input[type=button] {
			background-color: #4CAF50;
			color: white
		}
		.container {
			background-color: #f1f1f1;
			padding: 20px
		}
		#message {
			display: none;
			position: relative;
			margin-top: 10px
		}
		.valid {
			display: none
		}
  </style>
</head>

<body>
	<div class="container">
		<form action="/db.php" id="form">
			<label for="psw">Password</label>
			<input type="password" id="psw" name="psw" required>
			<input type="button" value="Submit" onclick="analyze()">
		</form>
	</div>
	<div id="message">
		<h3 id="theH3">Your password doesn't contain any of the following:</h3>
		<p id="letter" class="invalid">A letter</p>
		<p id="number" class="invalid">A number</p>
		<p id="length" class="invalid">10 characters</p>
	</div>
  <script>
    var myInput = document.getElementById("psw");
		var letter = document.getElementById("letter");
		var capital = document.getElementById("capital");
		var number = document.getElementById("number");
		var length = document.getElementById("length");
    var tmp = 0;
		myInput.onfocus = function () {
			document.getElementById("message").style.display = "block";
		}
		myInput.onblur = function () {
			document.getElementById("message").style.display = "none";
		}
		myInput.onkeyup = function () {
			var lowerCaseLetters = /[a-zA-Z]/g;
			if (myInput.value.match(lowerCaseLetters)) {
				letter.classList.remove("invalid");
				letter.classList.add("valid");
        tmp++;
			} else {
				letter.classList.remove("valid");
				letter.classList.add("invalid");
			}
			var numbers = /[0-9]/g;
			if (myInput.value.match(numbers)) {
				number.classList.remove("invalid");
				number.classList.add("valid");
        tmp++;
			} else {
				number.classList.remove("valid");
				number.classList.add("invalid");
			} if (myInput.value.length >= 10) {
				length.classList.remove("invalid");
				length.classList.add("valid");
        tmp++;
			} else {
				length.classList.remove("valid");
				length.classList.add("invalid");
			}
		}
    function analyze() {
    var lowerCaseLetters = /[a-zA-Z]/g;
    var numbers = /[0-9]/g;
    if (lowerCaseLetters.test(myInput.value) && numbers.test(myInput.value))document.getElementById('form').submit();
        if(tmp==3){
        var message = document.getElementById('theH3')
        message.style('display:none;');
        }
    }
    </script>
</body>

</html>

Answer 2

＆＃13;

<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" title="Wrong Code" placeholder="Security Code" />

＆＃13;

^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$

我认为你正在寻找这个website。网址：http://html5pattern.com/Names

HTML5模式 - 10个字符 - 至少一个字母

2 个答案: