Question

如果值有效且无效，我想要两种不同的颜色。 ym是yearmonth value = yyyymm lot是1到5之间的数字如果ym值为null，那么我们就无法为批次赋值。这就是代码。

function validate() 
{  
   if(document.myform.ym.value.length=="")
   {
     document.myform.ym.focus();
   }
   if(document.myform.ym.value.length!=6)
   {   
     document.myform.ym.focus();
     document.getElementById("lot").value=null;
   }  
}

Answer 1

对于无效且有效的样式，它就像exports.force = (par, io, socket) => { // retrieve the socket id of the user to aim Users.findOne({_id: par.id}, {socketId: 1, pseudo: 1}, (err, res) => { console.log('--------------------------------------------------'); console.log('err: ', err); console.log('pseudo: ', res.pseudo); console.log('socketId: ', res.socketId); // emit the value to a specific user // not working io.sockets.to(res.socket).emit('notifExtUpdate', {val: 'TO'}); io.to(res.socket).emit('notifExtUpdate', {val: 'TO'}); io.broadcast.to(res.socket).emit('notifExtUpdate', {val: 'TO'}); socket.broadcast.to(res.socket).emit('notifExtUpdate', {val: 'TO'}); socket.to(res.socket).emit('notifExtUpdate', {val: 'TO'}); // working well, but not my purpose io.emit('notifExtUpdate', {val: 'BROADCAST'}); socket.broadcast.emit('notifExtUpdate', {val: 'BROADCAST'}); }); };和:valid一样简单。您可以设置自己的模式以使样式能够理解什么是有效的。

＆＃13;

:invalid

＆＃13;

input:valid {
background:green;
}

input:invalid {
background:red;
}

＆＃13;

Answer 2

使用pattern='\d{4}[/]\d{2}'

<强> A）

input[type="text"]:valid {
  border: 2px solid green;
} 

input[type="text"]:invalid {
  border: 2px solid red;
}

<input type='text' pattern='\d{4}[/]\d{2}' placeholder='yyyymm'>

<强> B）

input[type="text"]:valid + span:after{
  content: '\2714';
  color: green;
} 

input[type="text"]:invalid + span:after {
  content: '\2718';
  color: red;
}

<input type='text' pattern='\d{4}[/]\d{2}' placeholder='yyyymm'> <span></span>

如何在CSS中设置不同的颜色，焦点一个用于有效，一个用于无效

2 个答案: